La expresión de juicio de expresión CSS establece el estilo de entrada

Autor：Eve Cole Fecha de actualización：2009-06-20 17:34:55

Utilice la expresión CSS para determinar la expresión para establecer el estilo de entrada, que es simple y liviana. La desventaja es que FireFox no admite expresiones de juicio. Lo fatal es que solo puedes distinguir uno (por ejemplo, en el ejemplo, solo puedes distinguir el cuadro de texto), no intentes configurar varios, los siguientes sobrescribirán los superiores... Orz.. .

Código:

div css xhtml xml Ejemplo de código fuente

Código fuente de ejemplo [www.downcodes.com]

<!doctype html public "-//W3C//DTD XHTML 1.0 Transicional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<cabeza>
<título>www.downcodes.com</título>
<meta nombre="Autor" contenido="JustinYoung"/>
<meta nombre="Palabras clave" contenido=""/>
<meta nombre="Descripción" contenido=""/>
<meta http-equiv="Tipo de contenido" content="text/html; charset=utf-8"/>
<tipo de estilo="texto/css">
aporte
{
color de fondo:expresión(this.type=="texto"?'#FFC':'');
}
</estilo>
</cabeza>

<cuerpo>
<dl>
<dt>Este es un cuadro de texto normal:<dd><input type="text" name="">
<dt>Este es un botón normal:<dd><input type="button" value="soy un botón">
</dl>
</cuerpo>
</html>

Otra manera:

Código fuente de ejemplo [www.downcodes.com]

aporte{
zoom: expresión(función(ele){(ele.className)?ele.className+=" "+ele.type:ele.className=ele.type; ele.style.zoom = "1";}(this));
}

1. Saque los atributos de entrada y asígnelos a className.
2. Para la expresión, se utiliza un atributo insignificante (aquí zoom) para activarlo. Después de procesar lo que se debe hacer, este atributo se sobrescribe para resolver el problema de eficiencia de la ejecución continua de la expresión.

Código:

Código fuente de ejemplo [www.downcodes.com]

<tipo de estilo="texto/css" media="todos">
entrada[tipo="texto"]{
borde: 1px sólido; color del borde: #CCC #EEE #EEE #CCC;
fondo: #F5F5F5;
}
entrada[tipo="contraseña"]{
borde: 1px sólido; color del borde: #CCC #EEE #EEE #CCC;
color: #000; fondo: #F5F5F5;
ancho: 50px;
}
entrada[tipo="botón"]{
borde: 1px sólido; color del borde: #EEE #CCC #CCC #EEE;
color: #000; peso de fuente: negrita; fondo: #F5F5F5;
}
entrada[tipo="restablecer"]{
borde: 1px sólido; color del borde: #EEE #CCC #CCC #EEE;
color: #666; fondo: #F5F5F5;
}
</estilo>
</cabeza>
<cuerpo>
<tipo de entrada="texto" nombre="xx" />
<tipo de entrada="contraseña" nombre="yy" />
<tipo de entrada="casilla de verificación" nombre="oo" />
<tipo de entrada="radio" nombre="pp" />
<tipo de entrada="botón" nombre="qq" valor="botón" />
<tipo de entrada="reset" nombre="oo" valor="reset" />
</cuerpo>
</html>