CSS attribut "background-color" ne fonctionne pas sur la case à cocher à l'intérieur
le titre l'explique assez bien. J'ai quelques cases à cocher dans une div. Mais pour certaines raisons, l'attribut "background-color" ne fonctionne pas. Bien que le "bord supérieur" ne semble pas fonctionner...
je me demande comment un attribut peut fonctionner et un autre pas. Ce n'est pas non plus comme si le div avait ses propres attributs de couleur d'arrière-plan qui pourraient potentiellement dépasser les attributs des cases à cocher.
en tout cas, voici mon HTML (généré par 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>
et voici mon 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;
}
merci à l'avance pour toute personne qui peut me diriger dans la bonne direction!
6 réponses
une case à cocher n'a pas de couleur de fond, ce que vous pourriez vouloir faire est envelopper chaque case à cocher avec une div qui a la couleur. votre sortie devrait être quelque chose comme ceci:
<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>
en plus de la réponse actuellement acceptée: vous pouvez définir la bordure et l'arrière-plan d'une case à cocher/radiobutton, mais la façon dont il est rendu à la fin dépend du navigateur. Par exemple, si vous mettez un fond rouge sur une case à cocher
- IE montrera une bordure rouge au lieu de
- Opéra montrera un fond rouge comme prévu
- Firefox, Safari et Chrome ne feront rien
cet article compare quelques navigateurs et explique au moins le comportement de IE. Il est peut-être un peu plus ancien (y compris Netscape), mais lorsque vous le testez, vous remarquerez que peu de choses ont changé. Une autre comparaison peut être trouvée ici .
vous pouvez utiliser des éléments peseudo comme ceci:
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: "14";
}<label>Checkbox label
<input type="checkbox">
</label>ma solution
initialement affiché ici .
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>la meilleure solution pour changer la couleur de fond de case à cocher
input[type=checkbox] {
margin-right: 5px;
cursor: pointer;
font-size: 14px;
width: 15px;
height: 12px;
position: relative;
}
input[type=checkbox]:after {
position: absolute;
width: 10px;
height: 15px;
top: 0;
content: " ";
background-color: #ff0000;
color: #fff;
display: inline-block;
visibility: visible;
padding: 0px 3px;
border-radius: 3px;
}
input[type=checkbox]:checked:after {
content: "✓";
font-size: 12px;
} <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car" checked> I have a car<br>
<input type="checkbox" name="vehicle" value="Car" checked> I have a bus<br> lorsque vous entrez la balise body, appuyez sur space une seule fois sans fermer la balise et entrez bgcolor="red" , par exemple. Ensuite, choisissez une couleur différente pour votre police.