css - tabla - qué impuesto se paga por herencia

color de fondo: heredar no funciona en el elemento de entrada en IE 8/9/10

Question

Si tengo un div con un conjunto de colores de fondo explícito, y un elemento de entrada dentro de él, con el conjunto de colores de fondo para ''heredar'', entonces funciona como se espera en Chrome, Firefox y Safari, pero no funciona en IE 8. 9, o 10.

Aquí hay un ejemplo mínimo que ilustra el problema: ejemplo de jsbin

El cuadro de texto debe tener el mismo color de fondo. Cuando se desplaza sobre el div, el color de fondo del div cambia, y la entrada también debería cambiar. Cuando hace clic en la entrada, hay una: regla de enfoque que anula la herencia.

Answer 1

¿No será el color de fondo: transparente será la solución aceptable?

Answer 2

Pude obtener el efecto que querías usando el siguiente CSS:

div.container {
    margin: 50px;
    padding: 10px;
    background-color: #aaa;
}
div.container input {
    background-color: transparent;
    border-width: 0;
}
div.container:hover {
    background-color: yellow;
}
div.container input:focus {
    background-color: white;
}

Por alguna razón, la herencia con la propiedad de color de fondo en IE10 parece implementarse de manera diferente a otros navegadores.

Establecer el color de fondo en transparent lugar de inherit parece funcionar.

Puede ver el resultado en la demostración: http://jsfiddle.net/audetwebdesign/kTM2f/

Desearía tener una mejor explicación, pero al menos tenemos una solución.

Error con IE8

Acabo de leer la siguiente pregunta relacionada:

Los cuadros de entrada con fondo transparente no se pueden hacer clic en IE8

La configuración background-color: transparent en un campo de entrada parece deshabilitar el campo de entrada en IE8.

En ese caso, el CSS tendría que ser la versión más explícita:

div.container {
    margin: 50px;
    padding: 10px;
    background-color: #aaa;
}
div.container input {
    background-color: #aaa;
    border-width: 0;
}
div.container:hover {
    background-color: yellow;
}
div.container:hover input {
    background-color: yellow;
}
div.container input:focus {
    background-color: white;
}

Answer 3

agregue un !important a su propiedad de la regla:

input {
  background-color: inherit !important;
  border-width: 0;
}