html मतलब केवल सीएसएस और एचटीएमएल का प्रयोग करके कस्टम चेकबॉक्स




व्हाट इज एचटीएमएल (2)

मुझे केवल HTML और CSS का उपयोग करके एक कस्टम चेकबॉक्स बनाने की आवश्यकता है I अब तक मेरे पास है:

HTML / CSS:

.checkbox-custom {
  opacity: 0;
  position: absolute;
}
.checkbox-custom,
.checkbox-custom-label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}
.checkbox-custom + .checkbox-custom-label:before {
  content: '';
  background: #fff;
  border-radius: 5px;
  border: 2px solid #ddd;
  display: inline-block;
  vertical-align: middle;
  width: 10px;
  height: 10px;
  padding: 2px;
  margin-right: 10px;
  text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 5px;
  border: solid blue;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  border-radius: 0px;
  margin: 0px 15px 5px 5px;
}
<div>
  <input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox">
  <label for="checkbox-1" class="checkbox-custom-label">First Choice</label>
</div>
<div>
  <input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox">
  <label for="checkbox-2" class="checkbox-custom-label">Second Choice</label>
</div>

checked चेकबॉक्स एक चेकमार्क के बजाय सिर्फ एक चेकमार्क के बजाय इसके चारों ओर स्थित चौकोर सीमा के साथ एक चेकमार्क होना चाहिए। उत्तर के लिए खोज, मैंने केवल उन मामलों को पाया है जहां एक यूटीएफ -8 का चरित्र या एक छवि का उपयोग करके चेकमार्क प्रदर्शित किया गया है। मैं इनमें से किसी एक का उपयोग करने में सक्षम नहीं हूं जो मैं पूरा करने की कोशिश कर रहा हूं। मैं केवल सादे सीएसएस और एचटीएमएल का उपयोग करने में सक्षम हूं। कोई सुझाव?

यहां कोडन: http://codepen.io/alisontague/pen/EPxagW?editors=110


मेरा पिछला उत्तर गलत है क्योंकि यह एक तत्व पर छद्म तत्व चयनकर्ता ::before का उपयोग करता है ::before वह कंटेनर नहीं है मेरी त्रुटि को इंगित करने के लिए @ बोल्टकॉक् करने के लिए धन्यवाद इसलिए, मैं एक अन्य समाधान के साथ आया जो चेकबॉक्स हैक और CSS3 के भाई चयनकर्ता ( ~ ) का उपयोग करता है।

CodePen पर डेमो

input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
input[type=checkbox] ~ label::before {
  content: '\2713';
  display: inline-block;
  text-align: center;
  color: white;
  line-height: 1em;
  width: 1em;
  height: 1em;
  border: 1px inset silver;
  border-radius: 0.25em;
  margin: 0.25em;
}
input[type=checkbox]:checked ~ label::before {
  color: black;
}
<form name="checkbox-form" id="checkbox-form">
  <div>
    <input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox">
    <label for="checkbox-1" class="checkbox-custom-label">First Choice</label>
  </div>
  <div>
    <input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox">
    <label for="checkbox-2" class="checkbox-custom-label">Second Choice</label>
  </div>
</form>

मैंने स्टैक ओव्हरफ्लो के "रन कोड-स्निपेट" कार्यक्षमता का उपयोग नहीं किया क्योंकि मैं इसे चलाने पर कुछ अजीब काम करता है मुझे लगता है कि यह चेकबॉक्स हैक की वजह से है


समस्या यह है कि आप स्क्वायर बॉर्डर और चेकमार्क के लिए एक ही छद्म तत्व का उपयोग कर रहे हैं। सरल समाधान का उपयोग करना जारी रखना होगा :before सीमा के लिए छद्म तत्व :before , और तब इसका उपयोग करें :after चेकमार्क के लिए छद्म तत्व के :after

नवीनीकृत उदाहरण

आपको पूरी तरह से स्थिति है :after माता .checkbox-custom पिता के सापेक्ष छद्म तत्व के :after.checkbox-custom लेबल तत्व

यहां अद्यतन कोड है:

.checkbox-custom {
  display: none;
}
.checkbox-custom-label {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}
.checkbox-custom + .checkbox-custom-label:before {
  content: '';
  background: #fff;
  border-radius: 5px;
  border: 2px solid #ddd;
  display: inline-block;
  vertical-align: middle;
  width: 10px; height: 10px;
  padding: 2px; margin-right: 10px;
}
.checkbox-custom:checked + .checkbox-custom-label:after {
  content: "";
  padding: 2px;
  position: absolute;
  width: 1px;
  height: 5px;
  border: solid blue;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  top: 2px; left: 5px;
}
<h3>Checkboxes</h3>
<div>
  <input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox">
  <label for="checkbox-1" class="checkbox-custom-label">First Choice</label>
</div>
<div>
  <input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox">
  <label for="checkbox-2" class="checkbox-custom-label">Second Choice</label>
</div>





pseudo-element