Ciao Amici tutto quello che sto cercando di fare è cambiare il colore di sfondo di una casella di controllo. Mi sono stancato molte cose ma niente funziona. Qualcuno può aiutare?Come cambiare il colore di sfondo su una casella di spunta di input con css?
input[type="checkbox"] {
background: #3d404e;
border: #7f83a2 1px solid;
}
Uso sempre elementi pseudo :before e :after per modificare l'aspetto di caselle di controllo e pulsanti di opzione. funziona come un fascino.
consultare questo link per ulteriori informazioni
Passi
visibility:hidden o opacity:0 o position:absolute;left:-9999px ecc:before elemento e passaggio uno spazio vuoto o senza interruzione '\00a0';:checked, passare l'unicode content: "\2713", che è un segno di spunta;:focus per rendere accessibile la casella di controllo.Ecco come ho fatto.
.box {
background: #666666;
color: #ffffff;
width: 250px;
padding: 10px;
margin: 1em auto;
}
p {
margin: 1.5em 0;
padding: 0;
}
input[type="checkbox"] {
visibility: hidden;
}
label {
cursor: pointer;
}
input[type="checkbox"] + label:before {
border: 1px solid #333;
content: "\00a0";
display: inline-block;
font: 16px/1em sans-serif;
height: 16px;
margin: 0 .25em 0 0;
padding: 0;
vertical-align: top;
width: 16px;
}
input[type="checkbox"]:checked + label:before {
background: #fff;
color: #333;
content: "\2713";
text-align: center;
}
input[type="checkbox"]:checked + label:after {
font-weight: bold;
}
input[type="checkbox"]:focus + label::before {
outline: rgb(59, 153, 252) auto 5px;
}<div class="content">
<div class="box">
<p>
<input type="checkbox" id="c1" name="cb">
<label for="c1">Option 01</label>
</p>
<p>
<input type="checkbox" id="c2" name="cb">
<label for="c2">Option 02</label>
</p>
<p>
<input type="checkbox" id="c3" name="cb">
<label for="c3">Option 03</label>
</p>
</div>
</div>molto più elegante utilizzando :before e :after
body{
font-family: sans-serif;
}
.checkbox {
margin: 50px auto;
position: relative;
display: block;
width: 100px;
}
input[type="checkbox"] {
width: auto;
opacity: 0.00000001;
position: absolute;
left: 0;
margin-left: -20px;
}
.helper {
position: absolute;
top: -4px;
left: -4px;
cursor: pointer;
display: block;
font-size: 16px;
user-select: none;
color: #e7e7e7;
}
.helper:before {
content: '';
position: absolute;
left: 0;
top: 0;
margin: 4px;
width: 22px;
height: 22px;
transition: transform 0.28s ease;
border-radius: 3px;
border: 2px solid #7bbe72;
}
.helper:after {
content: '';
display: block;
width: 10px;
height: 5px;
border-bottom: 2px solid #7bbe72;
border-left: 2px solid #7bbe72;
-webkit-transform: rotate(-45deg) scale(0);
-moz-transform: rotate(-45deg) scale(0);
-ms-transform: rotate(-45deg) scale(0);
transform: rotate(-45deg) scale(0);
position: absolute;
top: 12px;
left: 10px;
}
input[type="checkbox"]:checked ~ .helper::before {
color: #7bbe72;
}
input[type="checkbox"]:checked ~ .helper::after {
-webkit-transform: rotate(-45deg) scale(1);
-moz-transform: rotate(-45deg) scale(1);
-ms-transform: rotate(-45deg) scale(1);
transform: rotate(-45deg) scale(1);
}
.checkbox label {
min-height: 24px;
padding-left: 35px;
margin-bottom: 0;
font-weight: normal;
cursor: pointer;
vertical-align: sub;
}
input[type="checkbox"]:focus + label::before {
outline: rgb(59, 153, 252) auto 5px;
}<div class="checkbox">
<label>
<input type="checkbox" name="" value="">
<i class="helper"></i>Checkbox
</label>
</div>
stile del bordo appare come 'border: 1px solid #color;', in realtà. Correggilo e dillo se funziona. – ankhzet
@DoughnutZombie, 1) sì, duplicato 2) no, sembra che Ronny abbia un'altra causa con il suo codice, non lo stesso stile di sfondo ma il missflexforming border-styling, che rompe la verifica css – ankhzet
Qui ho creato un [Fiddle] (http://jsbin.com/vimoma/edit?html,css,output) per te .. – shishir