Colocaremos el mismo código que en el anterior post, con la diferencia de que la dirección (url) de la imagen con las banderas será otra, ya que esta tendrá el fondo de color negro.
<center><img src="http://img527.imageshack.us/img527/632/84056383at1qx3.png"/></center>
<form id="translateForm" action="http://www.worldlingo.com/S1790.5/translation" target="_blank">
<input value="ES" name="wl_srclang" type="hidden"/>
<select style="font-size: 70%; width: 160px;" name="wl_trglang">
<option value="EN"/>Español - Inglés
<option value="FR"/>Español - Francés
<option value="DE"/>Español - Alemán
<option value="IT"/>Español - Italiano
<option value="PT"/>Español - Portugués
<option value="RU"/>Español - Ruso
</select>
<input value="http://elescaparatederosa.blogspot.com/" name="wl_url" type="hidden"/>
<input style="font-size: 70%; width: 50px;" value="Traduce" type="submit"/>
</form>
ejemplo
Si dejamos este código tal como está, el resultado sería este:
modificaciones
El código CSS está dividido en dos partes:
a) La que pertenece a la casilla donde se muestran las opciones para escoger idioma:
form#translateForm select {
background-color:#000;
color:#ddd;
border:1px solid #999;
}
background-color:#000;
Es el color de fondo de la "cajita" de selección, en este caso está en color negro (#000) pero podemos escoger el que queramos.
color:#ddd; Es el color del texto, está en un color gris clarito, pero al igual que antes, podemos cambiarlo.
border:1px solid #999; Es borde que rodea a la caja de opciones, aquí podemos escoger el ancho (1px), el color (#999) y el tipo de borde (solid, dashed, dotted)
b) Y la que pertenece a la del botón "Traduce":
form#translateForm input {
background-color:transparent;
color:#ddd;
border:1px solid #999;