html - poner - selectores de atributos css

El atributo CSS '''' color de fondo '''' no funciona en la casilla dentro de<div>

Question

El título lo explica bastante. Tengo un par de casillas de verificación dentro de un div desplazable. Pero por alguna razón, el atributo ''color de fondo'' no funciona. Aunque el ''margen superior'' parece funcionar ...

Solo me deja perplejo cómo un atributo puede funcionar y otro no. Tampoco es como si el div tuviese su propio conjunto de atributos de color de fondo que podría sobrepasar los atributos de las casillas de verificación.

De todas formas, debajo está mi HTML (que es generado por JSP):

<div class="listContainer">
    <input type="checkbox" class="oddRow">item1<br/>
    <input type="checkbox" class="evenRow">item2<br/>
    <input type="checkbox" class="oddRow">item3<br/>
    <input type="checkbox" class="evenRow">item4<br/>
    ...
</div>

Y aquí está mi CSS:

.listContainer {
            border:2px solid #ccc;
            width:340px;
            height: 225px;
            overflow-y: scroll;
            margin-top: 20px;
            padding-left: 10px;
        }

.oddRow {
            margin-top: 5px;
            background-color: #ffffff;
        }

.evenRow{
            margin-top: 5px;
            background-color: #9FFF9D;
        }

¡Gracias de antemano por cualquier persona que pueda señalarme en la dirección correcta!

Answer 1

Mi solución

Inicialmente publicado here .

input[type="checkbox"] {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
  background: lightgray;
  height: 16px;
  width: 16px;
  border: 1px solid white;
}

input[type="checkbox"]:checked {
  background: #2aa1c0;
}

input[type="checkbox"]:hover {
  filter: brightness(90%);
}

input[type="checkbox"]:disabled {
  background: #e6e6e6;
  opacity: 0.6;
  pointer-events: none;
}

input[type="checkbox"]:after {
  content: '''';
  position: relative;
  left: 40%;
  top: 20%;
  width: 15%;
  height: 40%;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  display: none;
}

input[type="checkbox"]:checked:after {
  display: block;
}

input[type="checkbox"]:disabled:after {
  border-color: #7b7b7b;
}

<input type="checkbox"><br>
<input type="checkbox" checked><br>
<input type="checkbox" disabled><br>
<input type="checkbox" disabled checked><br>

Answer 2

Además de la respuesta actualmente aceptada: puede establecer el borde y el fondo de una casilla de verificación / botón de radio, pero la forma en que se representa al final depende del navegador. Por ejemplo, si establece un fondo rojo en una casilla de verificación

• IE mostrará un borde rojo en su lugar
• Opera mostrará un fondo rojo como estaba previsto
• Firefox, Safari y Chrome no harán nada

Este artículo compara algunos navegadores y explica al menos el comportamiento de IE. Puede ser un poco más antiguo (sigue incluyendo a Netscape), pero cuando pruebas alrededor notarás que no ha cambiado mucho. Otra comparación se puede encontrar here .

Answer 3

Cuando ingrese la etiqueta de cuerpo, presione espacio una sola vez sin cerrar la etiqueta e ingrese bgcolor="red" , por ejemplo. A continuación, elija un color diff para su fuente.

Answer 4

Puedes usar elementos de peseudo como este:

<label >Checkbox label
  <input type="checkbox">
</label>


input[type=checkbox] {
  width: 30px;
  height: 30px;
  margin-right: 8px;
  cursor: pointer;
  font-size: 27px;
}


input[type=checkbox]:after {
    content: " ";
    background-color: #9FFF9D;
    display: inline-block;
    visibility: visible;
}

input[type=checkbox]:checked:after {
    content: "/2714";
}

Answer 5

Una casilla de verificación no tiene color de fondo, lo que podría querer hacer es ajustar cada casilla de verificación con un div que tenga el color. su salida debería ser algo como esto:

<div class="evenRow">
    <input type="checkbox" />
</div>
<div class="oddRow">
    <input type="checkbox" />
</div>
<div class="evenRow">
    <input type="checkbox" />
</div>
<div class="oddRow">
    <input type="checkbox" />
</div>