Veamos, os pongo cuatro casos
Código HTML:
<style type="text/css">
input.azul
{
background-color:blue;
}
</style> 1) Resultado, el input tiene como fondo el color azul y la imagen
Código HTML:
<input type="text" size="25" style="background: url(imagenes/imagen.png) no-repeat center right; background-color:blue;">
2) Resultado, el input tiene como fondo solamente la imagen
Código HTML:
<input type="text" size="25" style="background-color:blue; background: url(imagenes/imagen.png) no-repeat center right;">
3) Resultado, el input tiene como fondo solamente la imagen
Código HTML:
<input type="text" size="25" style="background: url(imagenes/imagen.png) no-repeat center right;" class="azul">
4) Resultado, el input tiene como fondo solamente la imagen
Código HTML:
<input type="text" size="25" class="azul" style="background: url(imagenes/imagen.png) no-repeat center right;">
¿Alguien me puede explicar el por qué de este funcionamiento? Bueno, que si el background-color va antes o después y en función de eso sale la imagen o no lo puedo llegar a entender, ya que por ejemplo, si pones
background-color: blue y luego pones
background-color:red se queda con el último (red).
Pero, ¿Por qué el class es indiferente antes o después?
Todo esto viene a que quiero que el input tenga color de fondo y también una imagen de fondo, así que si hay otra forma también la podéis comentar (otra forma sería que la imagen ocupase el tamaño del input y ya incluyese el color, pero no me parece solución)