Browsers WebKit (Safari, Chrome, Konqueror) têm vendor-específicas de execução do CSS appearance propriedade, bem como todo o apoio para :checked :disabled pseudo classes. A propriedade -khtml-appearance e é o valor padrão é visual Quando definido para none ele transforma o controle especificado (s) a uma tábua rasa, e isto, combinado :checked :hover :disabled facilita qualquer estilo de caixas e radiobuttons sem JavaScript ou complexo esquema truques. Tudo o que precisamos é uma fada que contém todos os estados possíveis (marcada, desmarcada, hover), de caixas e radiobuttons e no mínimo 50 linhas de CSS:
1. A imagem trasgo
RadioAndCheckBoxSprite
2. O HTML:
<ul>
<li>
<input type=”checkbox” id=”CheckBox1″ checked=”checked” />
<label for=”CheckBox1″> Checkbox 1 </ label>
</ li>
<li>
<input type=”checkbox” id=”CheckBox2″ />
<label for=”CheckBox2″> Checkbox 2 </ label>
</ li>
<li>
<input type=”checkbox” id=”CheckBox3″ disabled=”disabled” />
<label for=”CheckBox3″> Checkbox 2 </ label>
</ li>
</ ul>
<ul>
<li>
<input type=”radio” id=”Radio1″ checked=”checked” name=”radio” />
<label for=”Radio1″> Radio 1 </ label>
</ li>
<li>
<input type=”radio” id=”Radio2″ name=”radio” />
<label for=”Radio2″> Radio 2 </ label>
</ li>
<li>
<input type=”radio” id=”Radio3″ name=”radio” disabled=”disabled” />
<label for=”Radio3″> Radio 2 </ label>
</ li>
</ ul>
3. E o CSS, quando fazemos uso do atributo seletores, pseudo-classes, e, -khtml-appearance para none
etiqueta
(
Font: normal 12px/20px Arial, sans-serif;
Color: black;
Vertical-align: Médio;
)
/ * Definições comuns checkbox e radiobutton * /
input [type = "checkbox"],
input [type = "radio"]
(
-Khtml-aparência: none;
background: url ( “RadioAndCheckBoxSprite.gif”) no-repeat;
Width: 20px;
Height: 20px;
Vertical-align: Médio;
)
input [type = "checkbox"]
(
Background-position-x: left;
)
input [type = "radio"]
(
Background-position-x: direito;
)
input [type = "checkbox"]: hover,
input [type = "radio"]: hover
(
Background-y-position:-40px;
)
input [type = "checkbox"]: verificado,
input [type = "radio"]: verificada
(
Background-y-position:-20px;
)
input [type = "checkbox"]: verificada: hover,
input [type = "radio"]: verificada: hover
(
Background-y-position:-60px;
)
/ * Ajustes para deficientes checkbox e radiobutton * /
input [type = "radio"]: deficientes,
input [type = "checkbox"]: deficientes
(
Opacidade: ,3;
)
FireFox tem uma aplicação semelhante do imóvel -moz-appearance porém seu valor padrão é none e, neste momento, a abordagem acima referida não pode ser utilizado para qualquer navegador, mas o Safari e Google Chrome.
O exemplo completo está disponível para download no link abaixo.
Você pode também estar interessado nos seguintes scripts que tomar o controle sobre a aparência visual de outra forma elementos.