Expressão de julgamento de expressão CSS define estilo de entrada

Autor：Eve Cole Data da Última Atualização：2009-06-20 17:34:55

Use a expressão CSS para determinar a expressão para definir o estilo de entrada, que é simples e leve. A desvantagem é que o FireFox não suporta a expressão de julgamento. O fatal é que você só consegue distinguir um (por exemplo, no exemplo, você só consegue distinguir a caixa de texto), não tente definir vários, os seguintes substituirão os de cima... Orz.. .

Código:

div css xhtml xml Exemplo de código-fonte

Exemplo de código-fonte [www.downcodes.com]

<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<cabeça>
<title>www.downcodes.com</title>
<meta name="Autor" content="JustinYoung"/>
<meta name="Palavras-chave" content=""/>
<meta name="Descrição" content=""/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="texto/css">
entrada
{
cor de fundo:expressão(this.type=="text"?'#FFC':'');
}
</estilo>
</head>

<corpo>
<dl>
<dt>Esta é uma caixa de texto normal:<dd><input type="text" name="">
<dt>Este é um botão normal:<dd><input type="button" value="sou um botão">
</dl>
</body>
</html>

Outra maneira:

Exemplo de código-fonte [www.downcodes.com]

entrada{
zoom: expressão(function(ele){(ele.className)?ele.className+=" "+ele.type:ele.className=ele.type; ele.style.zoom = "1";}(este));
}

1. Retire os atributos de entrada e atribua-os a className.
2. Para a expressão, um atributo insignificante (aqui zoom) é usado para acioná-la. Após processar o que precisa ser feito, esse atributo é sobrescrito para resolver o problema de eficiência da execução contínua da expressão.

Código:

Exemplo de código-fonte [www.downcodes.com]

<style type="text/css" media="all">
entrada[type="texto"]{
borda: 1px sólido; cor da borda: #CCC #EEE #EEE #CCC;
plano de fundo: #F5F5F5;
}
entrada[tipo="senha"]{
borda: 1px sólido; cor da borda: #CCC #EEE #EEE #CCC;
cor: #000; fundo: #F5F5F5;
largura: 50px;
}
entrada[type="botão"]{
borda: 1px sólido; cor da borda: #EEE #CCC #CCC #EEE;
cor: #000; peso da fonte: negrito fundo: #F5F5F5;
}
entrada[type="redefinir"]{
borda: 1px sólido; cor da borda: #EEE #CCC #CCC #EEE;
cor: #666; fundo: #F5F5F5;
}
</estilo>
</head>
<corpo>
<input type="text" nome="xx" />
<input type="senha" name="aa" />
<input type="checkbox" name="oo" />
<input type="radio" name="pp" />
<input type="botão" nome="qq" valor="botão" />
<input type="reset" name="oo" value="reset" />
</body>
</html>