dic
09
2008

[Actualizado] CSS para Input Text

Simplemente se me ocurrió por no tener nada que hacer. No es nada del otro mundo, simplemente me pareció divertido:

input[type="text"] {
border: none;
background: transparent;
color:#333333;
}
input[type="text"]:hover {
border: thin #999999 outset;
filter:alpha(opacity=50);-moz-opacity:.5;opacity:.5;
background: #FFFFFF;
color: #000000;
}
input[type="text"]:focus  {
border: thin #000000 solid;
background: #FFFFFF;
color: #000000;
}
input[type="text"]:focus:hover {
border: thin #000000 solid;
filter:alpha(opacity=100);-moz-opacity:1;opacity:1;
background: #FFFFFF;
color: #000000;
}
select {
margin-left:5px;
margin-right: 5px;
border: thin transparent solid;
background: transparent;
color:#333333;
}
select:hover {
border: thin #999999 outset;
filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;
background: #FFFFFF;
color: #000000;
}
select:focus:hover {
border: thin #000000 solid;
filter:alpha(opacity=100);-moz-opacity:1;opacity:1;
background: #FFFFFF;
color: #000000;
}
select:focus {
border: thin #000000 solid;
background: #FFFFFF;
color: #000000;
}
option {
border:none;
background: #FFFFFF;
color: #000000;
}

Y aqui el codigo HTML… si gran cosa:

<form id="form1" name="form1" method="post" action="">
<label>Probando
<input type="text" name="textfield" />
</label>
<label>Otra prueba <select><option>prueba uno</option><option>prueba dos</option>prueba tres</select></label>
</form>

Y el resultado final es este:

Lo probé en IE y Firefox y se ve mucho mejor en FireFox… has una prueba.


Recuerda, FireFox es recomendado por el Dr Modding… y las mamas de los informáticos.

Written by Antioroku in: Informatica | Etiquetas: , , , , ,

2 comentarios »

RSS feed for comments on this post. TrackBack URL


Leave a Reply

Powered by WordPress | Theme: Aeros 2.0 by TheBuckmaker.com