html एक रेडियो बटन कैसे टॉगल बटन की तरह दिखता है




css radio-button (6)

मुझे पता है कि यह एक पुराना सवाल है, लेकिन चूंकि मैं बस ऐसा करने की सोच रहा था, मैंने सोचा कि मैं जो पोस्ट करता हूं वह पोस्ट करूंगा। क्योंकि मैं बूटस्ट्रैप का उपयोग कर रहा हूं, मैं बूटस्ट्रैप विकल्प के साथ गया था।

एचटीएमएल

<div class="col-xs-12">
    <div class="form-group">
        <asp:HiddenField ID="hidType" runat="server" />
        <div class="btn-group" role="group" aria-label="Selection type" id="divType">
            <button type="button" class="btn btn-default BtnType" data-value="1">Food</button>                        
            <button type="button" class="btn btn-default BtnType" data-value="2">Drink</button>
        </div>
    </div>
</div>

jQuery

$(document).ready(function () {
    $('#divType button').click(function () {
        $(this).addClass('active').siblings().removeClass('active');
        $('#<%= hidType.ClientID%>').val($(this).data('value'));
        //alert($(this).data('value'));             
    });
});

मैंने मूल्य को एक छिपे हुए फ़ील्ड में संग्रहीत करना चुना ताकि मेरे लिए मूल्य सर्वर-साइड प्राप्त करना आसान हो।

मैं रेडियो बटन का एक समूह टॉगल बटन के समूह की तरह दिखना चाहता हूं (लेकिन फिर भी रेडियो बटन की तरह काम करता है)। यह जरूरी नहीं है कि वे बिल्कुल टॉगल बटन की तरह दिखें।

मैं केवल सीएसएस और एचटीएमएल के साथ ऐसा कैसे कर सकता हूं?

संपादित करें: बटन को चेक / अनचेक होने पर मैं थोड़ा सर्कल गायब होने और स्टाइल बदलने के लिए संतुष्ट हो जाऊंगा।


शुद्ध सीएसएस और एचटीएमएल (जैसा कि पूछा गया)

उदाहरण छवि:

वास्तव में कुछ साफ और सीधे आगे की तलाश करने के बाद, मैंने इसे एक और कोड से एक साधारण परिवर्तन के साथ बनाया, जिसे केवल चेकबॉक्स पर ही बनाया गया था, इसलिए मैंने रैडियोज़ के लिए funcionality की कोशिश की और यह भी काम किया (!)।

सीएसएस (एससीएसएस) पूरी तरह से @mallendeo (जैसा कि जेएस क्रेडिट पर स्थापित है) से है, मैंने जो किया वह केवल रेडियो के इनपुट को बदलता था, और उसी रेडियो को सभी रेडियो स्विचों में ही दिया गया .... और वोला! ! वे स्वचालित रूप से एक दूसरे को निष्क्रिय कर देते हैं !!

बहुत साफ, और जैसा कि आपने पूछा कि यह केवल सीएसएस और एचटीएमएल है !!

यह वही है जो मैं एक दर्जन से अधिक विकल्पों की कोशिश करने और संपादित करने के 3 दिन बाद (जो अधिकांशतः jQuery की आवश्यकता है, या लेबल की अनुमति नहीं देता है, या यहां तक ​​कि वर्तमान ब्राउज़र के साथ वास्तव में संगत नहीं है) के संपादन के बाद से यह देख रहा था। यह सब मिला है!

मैं आपको एक कामकाजी उदाहरण देखने की अनुमति देने के लिए यहां कोड शामिल करने के लिए बाध्य हूं, इसलिए:

/** Toggle buttons
 * @mallendeo
 * forked @davidtaubmann
 * from https://codepen.io/mallendeo/pen/eLIiG
 */
html, body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  min-height: 100%;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  font-family: sans-serif;
}

ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tg-list {
  text-align: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.tg-list-item {
  margin: 0 10px;;
}

h2 {
  color: #777;
}

h4 {
  color: #999;
}

.tgl {
  display: none;
}
.tgl, .tgl:after, .tgl:before, .tgl *, .tgl *:after, .tgl *:before, .tgl + .tgl-btn {
  box-sizing: border-box;
}
.tgl::-moz-selection, .tgl:after::-moz-selection, .tgl:before::-moz-selection, .tgl *::-moz-selection, .tgl *:after::-moz-selection, .tgl *:before::-moz-selection, .tgl + .tgl-btn::-moz-selection {
  background: none;
}
.tgl::selection, .tgl:after::selection, .tgl:before::selection, .tgl *::selection, .tgl *:after::selection, .tgl *:before::selection, .tgl + .tgl-btn::selection {
  background: none;
}
.tgl + .tgl-btn {
  outline: 0;
  display: block;
  width: 4em;
  height: 2em;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.tgl + .tgl-btn:after, .tgl + .tgl-btn:before {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
}
.tgl + .tgl-btn:after {
  left: 0;
}
.tgl + .tgl-btn:before {
  display: none;
}
.tgl:checked + .tgl-btn:after {
  left: 50%;
}

.tgl-light + .tgl-btn {
  background: #f0f0f0;
  border-radius: 2em;
  padding: 2px;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
}
.tgl-light + .tgl-btn:after {
  border-radius: 50%;
  background: #fff;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
}
.tgl-light:checked + .tgl-btn {
  background: #9FD6AE;
}

.tgl-ios + .tgl-btn {
  background: #fbfbfb;
  border-radius: 2em;
  padding: 2px;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
  border: 1px solid #e8eae9;
}
.tgl-ios + .tgl-btn:after {
  border-radius: 2em;
  background: #fbfbfb;
  -webkit-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
}
.tgl-ios + .tgl-btn:hover:after {
  will-change: padding;
}
.tgl-ios + .tgl-btn:active {
  box-shadow: inset 0 0 0 2em #e8eae9;
}
.tgl-ios + .tgl-btn:active:after {
  padding-right: .8em;
}
.tgl-ios:checked + .tgl-btn {
  background: #86d993;
}
.tgl-ios:checked + .tgl-btn:active {
  box-shadow: none;
}
.tgl-ios:checked + .tgl-btn:active:after {
  margin-left: -.8em;
}

.tgl-skewed + .tgl-btn {
  overflow: hidden;
  -webkit-transform: skew(-10deg);
          transform: skew(-10deg);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
  font-family: sans-serif;
  background: #888;
}
.tgl-skewed + .tgl-btn:after, .tgl-skewed + .tgl-btn:before {
  -webkit-transform: skew(10deg);
          transform: skew(10deg);
  display: inline-block;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
  width: 100%;
  text-align: center;
  position: absolute;
  line-height: 2em;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
.tgl-skewed + .tgl-btn:after {
  left: 100%;
  content: attr(data-tg-on);
}
.tgl-skewed + .tgl-btn:before {
  left: 0;
  content: attr(data-tg-off);
}
.tgl-skewed + .tgl-btn:active {
  background: #888;
}
.tgl-skewed + .tgl-btn:active:before {
  left: -10%;
}
.tgl-skewed:checked + .tgl-btn {
  background: #86d993;
}
.tgl-skewed:checked + .tgl-btn:before {
  left: -100%;
}
.tgl-skewed:checked + .tgl-btn:after {
  left: 0;
}
.tgl-skewed:checked + .tgl-btn:active:after {
  left: 10%;
}

.tgl-flat + .tgl-btn {
  padding: 2px;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
  background: #fff;
  border: 4px solid #f2f2f2;
  border-radius: 2em;
}
.tgl-flat + .tgl-btn:after {
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
  background: #f2f2f2;
  content: "";
  border-radius: 1em;
}
.tgl-flat:checked + .tgl-btn {
  border: 4px solid #7FC6A6;
}
.tgl-flat:checked + .tgl-btn:after {
  left: 50%;
  background: #7FC6A6;
}

.tgl-flip + .tgl-btn {
  padding: 2px;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
  font-family: sans-serif;
  -webkit-perspective: 100px;
          perspective: 100px;
}
.tgl-flip + .tgl-btn:after, .tgl-flip + .tgl-btn:before {
  display: inline-block;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
  width: 100%;
  text-align: center;
  position: absolute;
  line-height: 2em;
  font-weight: bold;
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border-radius: 4px;
}
.tgl-flip + .tgl-btn:after {
  content: attr(data-tg-on);
  background: #02C66F;
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}
.tgl-flip + .tgl-btn:before {
  background: #FF3A19;
  content: attr(data-tg-off);
}
.tgl-flip + .tgl-btn:active:before {
  -webkit-transform: rotateY(-20deg);
          transform: rotateY(-20deg);
}
.tgl-flip:checked + .tgl-btn:before {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.tgl-flip:checked + .tgl-btn:after {
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
  left: 0;
  background: #7FC6A6;
}
.tgl-flip:checked + .tgl-btn:active:after {
  -webkit-transform: rotateY(20deg);
          transform: rotateY(20deg);
}
<h2>Toggle 'em</h2>
<ul class='tg-list'>
  <li class='tg-list-item'>
    <h3>Radios:</h3>
  </li>
  <li class='tg-list-item'>
    <label class='tgl-btn' for='rd1'>
      <h4>Light</h4>
    </label>
    <input class='tgl tgl-light' id='rd1' name='group' type='radio'>
    <label class='tgl-btn' for='rd1'></label>
    <label class='tgl-btn' for='rd1'>
      <h4>Light</h4>
    </label>
  </li>
  <li class='tg-list-item'>
    <label class='tgl-btn' for='rd2'>
      <h4>iOS 7 (Disabled)</h4>
    </label>
    <input checked class='tgl tgl-ios' disabled id='rd2' name='group' type='radio'>
    <label class='tgl-btn' for='rd2'></label>
    <label class='tgl-btn' for='rd2'>
      <h4>iOS 7 (Disabled)</h4>
    </label>
  </li>
  <li class='tg-list-item'>
    <label class='tgl-btn' for='rd3'>
      <h4>Skewed</h4>
    </label>
    <input class='tgl tgl-skewed' id='rd3' name='group' type='radio'>
    <label class='tgl-btn' data-tg-off='OFF' data-tg-on='ON' for='rd3'></label>
    <label class='tgl-btn' for='rd3'>
      <h4>Skewed</h4>
    </label>
  </li>
  <li class='tg-list-item'>
    <label class='tgl-btn' for='rd4'>
      <h4>Flat</h4>
    </label>
    <input class='tgl tgl-flat' id='rd4' name='group' type='radio'>
    <label class='tgl-btn' for='rd4'></label>
    <label class='tgl-btn' for='rd4'>
      <h4>Flat</h4>
    </label>
  </li>
  <li class='tg-list-item'>
    <label class='tgl-btn' for='rd5'>
      <h4>Flip</h4>
    </label>
    <input class='tgl tgl-flip' id='rd5' name='group' type='radio'>
    <label class='tgl-btn' data-tg-off='Nope' data-tg-on='Yeah!' for='rd5'></label>
    <label class='tgl-btn' for='rd5'>
      <h4>Flip</h4>
    </label>
  </li>
</ul>
<ul class='tg-list'>
  <li class='tg-list-item'>
    <h3>Checkboxes:</h3>
  </li>
  <li class='tg-list-item'>
    <label class='tgl-btn' for='cb1'>
      <h4>Light</h4>
    </label>
    <input class='tgl tgl-light' id='cb1' type='checkbox'>
    <label class='tgl-btn' for='cb1'></label>
    <label class='tgl-btn' for='cb1'>
      <h4>Light</h4>
    </label>
  </li>
  <li class='tg-list-item'>
    <label class='tgl-btn' for='cb2'>
      <h4>iOS 7</h4>
    </label>
    <input class='tgl tgl-ios' id='cb2' type='checkbox'>
    <label class='tgl-btn' for='cb2'></label>
    <label class='tgl-btn' for='cb2'>
      <h4>iOS 7</h4>
    </label>
  </li>
  <li class='tg-list-item'>
    <label class='tgl-btn' for='cb3'>
      <h4>Skewed</h4>
    </label>
    <input class='tgl tgl-skewed' id='cb3' type='checkbox'>
    <label class='tgl-btn' data-tg-off='OFF' data-tg-on='ON' for='cb3'></label>
    <label class='tgl-btn' for='cb3'>
      <h4>Skewed</h4>
    </label>
  </li>
  <li class='tg-list-item'>
    <label class='tgl-btn' for='cb4'>
      <h4>Flat</h4>
    </label>
    <input class='tgl tgl-flat' id='cb4' type='checkbox'>
    <label class='tgl-btn' for='cb4'></label>
    <label class='tgl-btn' for='cb4'>
      <h4>Flat</h4>
    </label>
  </li>
  <li class='tg-list-item'>
    <label class='tgl-btn' for='cb5'>
      <h4>Flip</h4>
    </label>
    <input class='tgl tgl-flip' id='cb5' type='checkbox'>
    <label class='tgl-btn' data-tg-off='Nope' data-tg-on='Yeah!' for='cb5'></label>
    <label class='tgl-btn' for='cb5'>
      <h4>Flip</h4>
    </label>
  </li>
</ul>

यदि आप स्निपेट चलाते हैं, तो आप देखेंगे कि मैं आईओएस रेडियो को चेक और अक्षम कर देता हूं, ताकि आप देख सकें कि किसी दूसरे को सक्रिय करते समय यह कैसे प्रभावित होता है। मैंने प्रत्येक रेडियो के लिए 2 लेबल भी शामिल किए, एक पहले और एक के बाद। एक ही विंडो में काम कर रहे चेकबॉक्स दिखाने के लिए मूल कोड की प्रति भी शामिल है।


आप जिस ब्राउज़र का समर्थन करना चाहते हैं उसके आधार पर, आप रेडियो बटन छिपाने के अलावा :checked छद्म-श्रेणी चयनकर्ता की :checked कर सकते हैं।

इस एचटीएमएल का प्रयोग करना:

<input type="radio" id="toggle-on" name="toggle" checked
><label for="toggle-on">On</label
><input type="radio" id="toggle-off" name="toggle"
><label for="toggle-off">Off</label>

आप निम्न सीएसएस की तरह कुछ उपयोग कर सकते हैं:

input[type="radio"].toggle {
  display: none;
}

input[type="radio"].toggle:checked + label {
  /* Do something special with the selected state */
}

उदाहरण के लिए, (कस्टम सीएसएस संक्षिप्त रखने के लिए) यदि आप Bootstrap का उपयोग कर रहे थे, तो आप अपने <label> तत्वों में class="btn" जोड़ सकते हैं class="btn" एक टॉगल बनाने के लिए उन्हें उचित रूप से शैलीबद्ध कर सकते हैं:

... जो सिर्फ निम्नलिखित अतिरिक्त सीएसएस की आवश्यकता है:

input[type="radio"].toggle:checked + label {
  background-image: linear-gradient(to top,#969696,#727272);
  box-shadow: inset 0 1px 6px rgba(41, 41, 41, 0.2),
                    0 1px 2px rgba(0, 0, 0, 0.05);
  cursor: default;
  color: #E6E6E6;
  border-color: transparent;
  text-shadow: 0 1px 1px rgba(40, 40, 40, 0.75);
}

input[type="radio"].toggle + label {
  width: 3em;
}

input[type="radio"].toggle:checked + label.btn:hover {
  background-color: inherit;
  background-position: 0 0;
  transition: none;
}

input[type="radio"].toggle-left + label {
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

input[type="radio"].toggle-right + label {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

मैंने इसे रेडियो बटन में अतिरिक्त फॉलबैक शैलियों के साथ-साथ जेएसफ़ील्ड डेमो टॉगल भी शामिल किया है । ध्यान दें कि :checked केवल आईई 9 में समर्थित है, इसलिए यह दृष्टिकोण नए ब्राउज़र तक ही सीमित है।

हालांकि, अगर आपको आईई 8 का समर्थन करने की आवश्यकता है और जावास्क्रिप्ट * पर वापस आने के लिए तैयार हैं, तो आप छद्म समर्थन में हैक कर सकते हैं :checked बिना किसी कठिनाई के :checked किया गया है (हालांकि आप उस बिंदु पर सीधे लेबल पर कक्षाओं को आसानी से सेट कर सकते हैं) ।

वर्कअराउंड के उदाहरण के रूप में कुछ त्वरित और गंदे jQuery कोड का उपयोग करना:

$('.no-checkedselector').on('change', 'input[type="radio"].toggle', function () {
    if (this.checked) {
        $('input[name="' + this.name + '"].checked').removeClass('checked');
        $(this).addClass('checked');
        // Force IE 8 to update the sibling selector immediately by
        // toggling a class on a parent element
        $('.toggle-container').addClass('xyz').removeClass('xyz');
    }
});
$('.no-checkedselector input[type="radio"].toggle:checked').addClass('checked');

फिर आप चीजों को पूरा करने के लिए सीएसएस में कुछ बदलाव कर सकते हैं:

input[type="radio"].toggle {
  /* IE 8 doesn't seem to like to update radio buttons that are display:none */
  position: absolute;
  left: -99em;
}

input[type="radio"].toggle:checked + label,
input[type="radio"].toggle.checked + label {
  /* Do something special with the selected state */
}

* यदि आप Modernizr का उपयोग कर रहे हैं, तो आप यह निर्धारित करने में सहायता के लिए :selector परीक्षण का उपयोग कर सकते हैं कि आपको फ़ॉलबैक की आवश्यकता है या नहीं। मैंने उदाहरण कोड में अपना परीक्षण "चेकसेलेक्टर" कहा है, और jQuery इवेंट हैंडलर बाद में केवल तभी स्थापित होता है जब परीक्षण विफल हो जाता है।


मैं आमतौर पर सीएसएस के साथ असली रेडियो बटन छुपाता हूं (या उन्हें अलग-अलग छिपे हुए इनपुट में बना देता हूं), जो इमेजरी मैं चाहता हूं उसे डाल सकता हूं (आप एक अनियमित सूची का उपयोग कर सकते हैं और अपनी शैलियों को ली तत्व में लागू कर सकते हैं) और फिर इनपुट टॉगल करने के लिए क्लिक ईवेंट का उपयोग करें । उस दृष्टिकोण का भी अर्थ है कि आप उन उपयोगकर्ताओं के लिए चीजों को सुलभ रख सकते हैं जो सामान्य वेब ब्राउज़र पर नहीं हैं - बस डिफ़ॉल्ट रूप से अपना उल छुपाएं और रेडियो बटन दिखाएं।


HTML:

<div>
    <label> <input type="radio" name="toggle"> On </label>
    <label> Off <input type="radio" name="toggle"> </label>
</div>

सीएसएस:

div { overflow:auto; border:1px solid #ccc; width:100px; }
label { float:left; padding:3px 0; width:50px; text-align:center; }
input { vertical-align:-2px; }

लाइव डेमो: http://jsfiddle.net/scymE/1/


ऊपर पोस्ट किए गए उस अच्छे सीएसएस समाधान जेएस फिडल उदाहरण का मेरा संस्करण यहां दिया गया है।

http://jsfiddle.net/496c9/

एचटीएमएल

<div id="donate">
    <label class="blue"><input type="radio" name="toggle"><span>$20</span></label>
    <label class="green"><input type="radio" name="toggle"><span>$50</span></label>
    <label class="yellow"><input type="radio" name="toggle"><span>$100</span></label>
    <label class="pink"><input type="radio" name="toggle"><span>$500</span></label>
    <label class="purple"><input type="radio" name="toggle"><span>$1000</span></label>
</div>

सीएसएस

body {
    font-family:sans-serif;
}

#donate {
    margin:4px;

    float:left;
}

#donate label {
    float:left;
    width:170px;
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;

}

#donate label span {
    text-align:center;
    font-size: 32px;
    padding:13px 0px;
    display:block;
}

#donate label input {
    position:absolute;
    top:-20px;
}

#donate input:checked + span {
    background-color:#404040;
    color:#F7F7F7;
}

#donate .yellow {
    background-color:#FFCC00;
    color:#333;
}

#donate .blue {
    background-color:#00BFFF;
    color:#333;
}

#donate .pink {
    background-color:#FF99FF;
    color:#333;
}

#donate .green {
    background-color:#A3D900;
    color:#333;
}
#donate .purple {
    background-color:#B399FF;
    color:#333;
}

रंगीन बटन के साथ स्टाइल :)





togglebutton