मेरे पास निम्न रेडियो बटन है, मुझे 38px होने के लिए बड़ा सर्कल चाहिए

input[type=radio] {
  visibility: hidden;
}

.label {
  font-weight: normal;
  color: #333;
}

.label::before {
  content: '';
  position: absolute;
  left: 0;
  width: 38px;
  height: 38px;
  border: 1px solid #727272;
  border-radius: 50%;
}

input[type=radio]:checked+label:after {
  content: '';
  position: absolute;
  width: 38px;
  height: 38px;
  left: 0;
  background: #0065bd;
  border: none;
  transform: scale(0.5);
  border-radius: 50%;
}
<div class="container">
  <input type="radio" id="radio1" value="on">
  <label for="radio1" class="label">Yes</label>
</div>

यहां एक fiddle दिया गया है, मैं लेबल को कैसे संरेखित कर सकता हूं ताकि यह केंद्र के साथ संरेखित हो और धक्का दिया जाए सर्कल का अधिकार?

2
dagda1 26 जुलाई 2017, 00:21

3 जवाब

सबसे बढ़िया उत्तर

शायद आपका कोड अधिक जटिल मामला है; जैसा कि आप चाहते हैं कि इनपुट बड़ा हो, हो सकता है कि आपको लेबल के बजाय इनपुट पर साइज़िंग आदि पर ध्यान देना चाहिए?

स्निपेट देखें (संपादन के बाद से अब रेडियो नीला हो गया है, जिसे इस कोडपेन से रूपांतरित किया गया है . यह क्लिक से पहले धूसर, बाद में नीला, बीच में और किनारे से इंडेंटेड होता है).

बस एक नोट: यदि आप एक डिफ़ॉल्ट मान का उपयोग करने जा रहे हैं (और केवल एक विकल्प है) तो शायद एक कस्टम चेकबॉक्स अधिक उपयुक्त विकल्प होगा? (रेडियो बटन आमतौर पर ऐसे उदाहरणों में उपयोग किया जाता है जहां उपयोगकर्ता के पास 2 या अधिक विकल्प होंगे, लेकिन केवल एक का चयन कर सकते हैं) .. बस एक विचार।

input[type="radio"] {
  display: none;
  width: 38px;
  height: 38px;
  border: 1px solid #727272;
}

input[type="radio"]+label span {
  display: inline-block;
  width: 38px;
  height: 38px;
  margin: 9px;
  vertical-align: middle;
  cursor: pointer;
  border-radius: 50%;
  background-color: grey;
}

input[type="radio"]:checked+label span {
  content="";
  background: #0065bd;
}

input[type="radio"]+label span,
input[type="radio"]:checked+label span {
  -webkit-transition: background-color 0.4s linear;
  -o-transition: background-color 0.4s linear;
  -moz-transition: background-color 0.4s linear;
  transition: background-color 0.4s linear;
}
<div class="container">
  <input type="radio" id="radio1" name="radio">
  <label for="radio1" class="label"><span></span>Yes</label>

  <input type="radio" id="radio2" name="radio">
  <label for="radio2" class="label"><span></span>No</label>
</div>
0
Rachel Gallen 26 जुलाई 2017, 09:35

इसे केंद्रित करने के लिए .container{ line-height:38px} जोड़ें (ऐसा लगता है कि यह पहले से ही दाईं ओर था)

https://jsfiddle.net/8gubpzhq/

इसे दाईं ओर ले जाने के लिए इसे इसमें जोड़ें

  .label {
  font-weight: normal;
  color: #333;
  padding-left:5px;//add this line
}

https://jsfiddle.net/vszuu535/

2
Vlado Pandžić 26 जुलाई 2017, 00:34

आप line-height:40px; को अपने .label में जोड़ सकते हैं ताकि इसे लंबवत रूप से केंद्र में रखा जा सके। इसे और दाईं ओर ले जाने के लिए आप padding-left:20px; जोड़ सकते हैं (आप अपनी आवश्यकताओं के अनुसार line-height और padding-left बदल सकते हैं)।

input[type=radio] {
  visibility: hidden;
}

.label {
  font-weight: normal;
  color: #333;
  line-height:40px;
  padding-left:20px;
}

.label::before {
  content: '';
  position: absolute;
  left: 0;
  width: 38px;
  height: 38px;
  border: 1px solid #727272;
  border-radius: 50%;
}

input[type=radio]:checked + label:after {
  content: '';
  position: absolute;
  width: 38px;
  height: 38px;
  left: 0;
  background: #0065bd;
  border: none;
  transform: scale(0.5);
  border-radius: 50%;
}
<div class="container">
  <input type="radio" id="radio1" value="on">
  <label for="radio1" class="label">Yes</label>
</div>
1
David Kris 26 जुलाई 2017, 00:39