हैलो दोस्तों, जो मैं करने की कोशिश कर रहा हूं वह एक चेकबॉक्स का पृष्ठभूमि रंग बदल रहा है। मैं कई चीजें थक गया लेकिन कुछ भी काम नहीं करता है। क्या कोई मदद कर सकता है?सीएसएस के साथ इनपुट चेकबॉक्स पर पृष्ठभूमि रंग कैसे बदलें?
input[type="checkbox"] {
background: #3d404e;
border: #7f83a2 1px solid;
}
मैं हमेशा चेकबॉक्स और रेडियो बटन की उपस्थिति को बदलने के लिए छद्म तत्वों :before और :after का उपयोग करें। यह एक आकर्षण की तरह काम करता है।
अधिक जानकारी के लिए इस link देखें
कदम
visibility:hidden या opacity:0 या position:absolute;left:-9999px आदि:before तत्व और पास का उपयोग कर एक नकली चेकबॉक्स बनाएं या तो एक खाली या एक गैर-ब्रेकिंग स्पेस '\00a0';:checked स्थिति में है, तो यूनिकोड content: "\2713" पास करें, जो एक चेकमार्क है;:focus शैली जोड़ें।हो गया यहाँ है कैसे मैंने किया।
.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>बहुत अधिक स्टाइलिश :before और :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>
बॉर्डर शैली 'सीमा की तरह दिखता है: 1px ठोस #color;,' वास्तव में। इसे ठीक करें और कहें कि क्या काम किया है। – ankhzet
@DoughnutZombie, 1) हाँ, डुप्लिकेट 2) नहीं, ऐसा लगता है कि रोनी के पास उसके कोड के साथ एक और कारण है, न कि पृष्ठभूमि स्टाइलिंग, लेकिन सीमा-स्टाइल मिसफॉर्मेटेड, जो सीएसएस सत्यापन – ankhzet
तोड़ता है, मैंने यहां एक [Fiddle] (http://jsbin.com/vimoma/edit?html,css ,output) आपके लिए .. – shishir