Merhaba Arkadaşlar tek yapmaya çalıştığım bir onay kutusunun arka plan rengini değiştirmek. Birçok şeyden yoruldum ama hiçbir şey işe yaramıyor. Biri yardım edebilir mi?Css ile giriş onay kutusundaki arka plan rengi nasıl değiştirilir?
input[type="checkbox"] {
background: #3d404e;
border: #7f83a2 1px solid;
}
Hep Onay kutuları ve radyo düğmeleri görünümünü değiştirmek için sözde elemanları :before ve :after kullanın. Bir çekicilik gibi çalışır.
Adımlar
visibility:hidden veya opacity:0 veya position:absolute;left:-9999px:before elemanı ve geçişi kullanarak sahte onay kutusunu oluşturun boş veya kırılmayan bir boşluk olan '\00a0';:checked durumundayken, bir onay işareti olan Unicode content: "\2713" pass;:focus stilini ekleyin. Yapıldı ben yaptım nasıl. :before ve
:after kullanılarak
Çok daha şık
.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>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>
sınır tarzı 'sınır gibi görünüyor: 1px solid #color; aslında,'. Bunu düzeltin ve işe yaradıysa söyle. – ankhzet
@DoughnutZombie, 1) evet, yinelenen 2) hayır, Ronny'nin koduyla başka bir nedene benzediği, arka plan stilini değil ama sınır stilini biçimlendiren, css verification – ankhzet
'u kesiştiği gibi Burada bir [Fiddle] oluşturdum (http://jsbin.com/vimoma/edit?html.css, output) sizin için .. – shishir