Uma das maiores utilidades dos seletores de atributo talvez seja estilizar formulários sem a utilização de classes. Entretanto, essa é uma técnica pouquíssima utilizada pois o Internet Explorer 6 e suas versões inferiores não interpretam o uso de seletores CSS.
Para estilizar o botão submit de um formulário utilizando seletores de atributo, podemos escrever o CSS da seguinte maneira:
input[type=submit] { propriedades }
Mas como o IE6 não interpreta esse código, geralmente aplica-se uma classe no submit do formulário ao invés de utilizar os seletores.
<form>
<label for="username">Nome</label><input type="text" id="username" />
<input type="submit" class=”submitButton” />
</form>
Pesquisando sobre seletores de atributo, encontrei este link no Shayna.com com um javascript que simula o uso de seletores de atributo no IE6. Basicamente, ele faz o que eu disse anteriormente, inclui uma classe para cada um dos elementos input existentes na página.
Para utilizá-lo, copie esse código e salve como ie6css.js.
function changeClasses(currentdoc) {
var inputElements = currentdoc.getElementsByTagName('input');
for (var i=0; i<inputElements.length; i++) {
if(inputElements[i].type == “submit”) {
inputElements[i].className = inputElements[i].className + ” submit”;
} else if (inputElements[i].type == “checkbox”) {
inputElements[i].className = inputElements[i].className + ” checkbox”;
} else if (inputElements[i].type == “radio”) {
inputElements[i].className = inputElements[i].className + ” radio”;
} else if (inputElements[i].type == “text”) {
inputElements[i].className = inputElements[i].className + ” textbox”;
}
}
}
E inclua esse código no cabeçalho da sua página:
<head>
<!--[if lt IE 6]><script type=”text/javascript” src=”assets/js/ie6css.js” ></script><![endif]–>
</head>
<body onload=”changeClasses(document)”>
…
</body>
Na verdade, o javascript só elimina o nosso trabalho de incluir uma classe para os elementos. Ele busca todos os input do html e inclui classes relativas ao tipo de cada input.
- Para type=”submit” inclui uma classe submitbutton;
- Para type=”checkbox” inclui uma classe checkbox;
- Para type=”radio” inclui uma classe radio;
- Para type=”text” inclui uma classe textbox;
Assim sendo, você precisa aplicar um estilo para cada uma das classes no seu arquivo CSS. Por exemplo:
input[type=submit],
input.submitbutton { propriedades }
Particularmente eu acho mais fácil incluir as classes manualmente, até porque se o internauta estiver com o javascript![[bb]](http://boo-box.com/bbli)
desabilitado corre-se o risco de perder alguma formatação.
Mas, de repente, pode ser útil em alguma situação específica.
E aí? Na minha janela ou na sua?