रेडियो बटन के बजाय छवियों का उपयोग करें

Question

अगर मेरे पास बटन वाला रेडियो समूह है:

... मैं बटन के बजाय चुनिंदा विकल्प में केवल चित्र कैसे दिखा सकता हूं, जैसे

Comments

क्या हम आपके कोड के लिए एक लाइव लिंक या jsFiddle देख सकते हैं?

— नितेश

एक रेडियो बटन सेट बनाएं और उन्हें एक छिपे हुए div में रखें। छवि पर क्लिक करें सेट करें कि विशेष रेडियो बटन की जाँच की पहली छवि पर इसका मतलब है अपने पहले रेडियो बटन सेट की जाँच की और इसी तरह अन्य दो के लिए। अगर आपको नहीं मिला तो मैं कोड के माध्यम से भी समझा सकता हूं।

— चिरागिट 007

यहाँ काम नहीं कर आप stackoverflow.com/questions/42736745/…

— कोड लड़के

Answer 1

• लपेटें रेडियो और छवि में<label>
• रेडियो बटन छिपाएँ (उपयोग न करें display:noneया visibility:hiddenइस तरह से पहुँच प्रभावित होगी)
• आसन्न सहोदर चयनकर्ता का उपयोग करके छिपे हुए रेडियो के बगल में छवि को लक्षित करें +

/* HIDE RADIO */
[type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
[type=radio] + img {
  cursor: pointer;
}

/* CHECKED STYLES */
[type=radio]:checked + img {
  outline: 2px solid #f00;
}

<label>
  <input type="radio" name="test" value="small" checked>
  <img src="http://placehold.it/40x60/0bf/fff&text=A">
</label>

<label>
  <input type="radio" name="test" value="big">
  <img src="http://placehold.it/40x60/b0f/fff&text=B">
</label>

_{अपने लेबलों में क्लास जोड़ना न भूलें और सीएसएस इसके बजाय उस क्लास का उपयोग करें।}

---

कस्टम शैलियों और एनिमेशन

यहाँ <i>तत्व और :afterछद्म का उपयोग कर एक उन्नत संस्करण है :

body{color:#444;font:100%/1.4 sans-serif;}


/* CUSTOM RADIO & CHECKBOXES
   http://stackoverflow.com/a/17541916/383904 */
.rad,
.ckb{
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.rad > input,
.ckb > input{ /* HIDE ORG RADIO & CHECKBOX */
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
/* RADIO & CHECKBOX STYLES */
/* DEFAULT <i> STYLE */
.rad > i,
.ckb > i{ 
  display: inline-block;
  vertical-align: middle;
  width:  16px;
  height: 16px;
  border-radius: 50%;
  transition: 0.2s;
  box-shadow: inset 0 0 0 8px #fff;
  border: 1px solid gray;
  background: gray;
}
/* CHECKBOX OVERWRITE STYLES */
.ckb > i {
  width: 25px;
  border-radius: 3px;
}
.rad:hover > i{ /* HOVER <i> STYLE */
  box-shadow: inset 0 0 0 3px #fff;
  background: gray;
}
.rad > input:checked + i{ /* (RADIO CHECKED) <i> STYLE */
  box-shadow: inset 0 0 0 3px #fff;
  background: orange;
}
/* CHECKBOX */
.ckb > input + i:after{
  content: "";
  display: block;
  height: 12px;
  width:  12px;
  margin: 2px;
  border-radius: inherit;
  transition: inherit;
  background: gray;
}
.ckb > input:checked + i:after{ /* (RADIO CHECKED) <i> STYLE */
  margin-left: 11px;
  background:  orange;
}

<label class="rad">
  <input type="radio" name="rad1" value="a">
  <i></i> Radio 1
</label>
<label class="rad">
  <input type="radio" name="rad1" value="b" checked>
  <i></i> Radio 2
</label>

<br>

<label class="ckb">
  <input type="checkbox" name="ckb1" value="a" checked>
  <i></i> Checkbox 1
</label>
<label class="ckb">
  <input type="checkbox" name="ckb2" value="b">
  <i></i> Checkbox 2
</label>

Comments

+1 छद्म चयनकर्ता के लिए, मुझे लगता है कि मैंने चयनित के लिए पूर्व में जावास्क्रिप्ट का उपयोग किया है! वह मुझे सिखाएगा ...

— 7:00 पर zik

दृश्यता छिपी होने का अर्थ है कि यह क्लिक-सक्षम नहीं है, और स्थिति निरपेक्ष इसे दस्तावेज़ प्रवाह से बाहर ले जाती है

— 99 समस्याएं - सिंटैक्स एक

यह एक उत्कृष्ट उत्तर है। क्या मैं इसके साथ ही काम करता हूं type="checkbox"।

— Wtower

ठीक है यह अच्छा है .. महान काम करता है, जाहिरा तौर पर IE पर भी काम करता है, लेकिन वास्तव में यह नहीं है। छवि सही ढंग से व्यवहार करती है, लेकिन जब फॉर्म सबमिट किया जाता है, तो कोई थंबनेल चयन नहीं होता है। मुझे लगता है कि मैं नया IE का उपयोग कर रहा हूं जो विन 8.1 के साथ आता है। कोई उपाय?

— जुनैद रहमान

पार्टी के लिए देर से, लेकिन इससे सावधान रहें। Visibility:hiddenस्क्रीन रीडर से इनपुट छिपाएंगे और एक्सेसिबिलिटी के दृष्टिकोण से बड़ा नंबर नहीं होगा।

— DPac

Answer 2

उदाहरण:

सचेत! यह समाधान CSS-only है।

मैं आपको CSS3 के नियमों के साथ बाय-डिफ़ॉल्ट इनपुट रेडियो बटन को छिपाकर CSS3 का लाभ उठाने की सलाह देता हूं :

.options input{
    margin:0;padding:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}

मैं अभी कुछ दिनों पहले एक उदाहरण देता हूँ।

• JSFiddle
• रेडियो-बटन के लिए छवियों का उपयोग कैसे करें - जिस्ट

Comments

यह बहुत अच्छा था! मैंने इसे ASP.NET फॉर्म में एकीकृत किया और यह एक आकर्षण की तरह काम किया :)

— गस

यह उदाहरण फ़ायरफ़ॉक्स 49.0.2 में XUbuntu 16.04.1 के तहत काम नहीं करता है

— सर्गेई

@SergeyKudriavtsev शायद कोड की जरूरत है और अद्यतन (यह उत्तर 2013 से है)। शुक्र है कि किसी को भी इसे सुधारने के लिए कोड खुला है। मैं जल्द ही इस पर विचार करूंगा। चीयर्स।

— रिचर्ड कॉट्रीना

फ़ायरफ़ॉक्स 60, विंडोज 10.

— ट्रेवर

मेरे पास 3 स्माइली चेहरों के सेट के लिए यह काम है। अब मुझे एक रूप में कई पंक्तियों की आवश्यकता है, प्रत्येक में स्माइली चेहरे का अपना सेट है। मेरी समस्या यह है कि जब एक पंक्ति बदली जाती है, तो वे सभी बदल जाती हैं। किसी भी विचार को पूरा करने के लिए किस भाग को संशोधित करने की आवश्यकता है?

— dave317

Answer 3

आप उसके लिए CSS का उपयोग कर सकते हैं।

HTML (केवल डेमो के लिए, यह अनुकूलन योग्य है)

<div class="button">
    <input type="radio" name="a" value="a" id="a" />
    <label for="a">a</label>
</div>
<div class="button">
    <input type="radio" name="a" value="b" id="b" />
    <label for="b">b</label>
</div>
<div class="button">
    <input type="radio" name="a" value="c" id="c" />
    <label for="c">c</label>
</div>
...

सीएसएस

input[type="radio"] {
    display: none;
}
input[type="radio"]:checked + label {
    border: 1px solid red;
}

jsFiddle

Answer 4

रेडियो बटन छिपा कर रखें, और छवियों पर क्लिक करने के बाद, उन्हें जावास्क्रिप्ट का उपयोग करके चुनें और अपनी छवि को स्टाइल करें ताकि वह चयनित दिखे। ये रहा मार्कअप -

<div id="radio-button-wrapper">
    <span class="image-radio">
        <input name="any-name" style="display:none" type="radio"/>
        <img src="...">
    </span>
    <span class="image-radio">
        <input name="any-name" style="display:none" type="radio"/>
        <img src="...">
    </span>
</div>

और जेएस

 $(".image-radio img").click(function(){
     $(this).prev().attr('checked',true);
 })

सीएसएस

span.image-radio input[type="radio"]:checked + img{
    border:1px solid red;
}

Answer 5

केवल https://stackoverflow.com/a/17541916/1815624 के आधार पर केवल कुछ छिपाने के लिए एक कक्षा का उपयोग करना

/* HIDE RADIO */
.hiddenradio [type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
.hiddenradio [type=radio] + img {
  cursor: pointer;
}

/* CHECKED STYLES */
.hiddenradio [type=radio]:checked + img {
  outline: 2px solid #f00;
}

<div class="hiddenradio">
<label>
  <input type="radio" name="test" value="small" checked>
  <img src="http://placehold.it/40x60/0bf/fff&text=A">
</label>

<label>
  <input type="radio" name="test" value="big">
  <img src="http://placehold.it/40x60/b0f/fff&text=B">
</label>
</div>

<div class="">
<label>
  <input type="radio" name="test" value="small" checked>
  <img src="http://placehold.it/40x60/0bf/fff&text=A">
</label>

<label>
  <input type="radio" name="test" value="big">
  <img src="http://placehold.it/40x60/b0f/fff&text=B">
</label>
</div>

Answer 6

यहाँ उदाहरण पर आधारित एक सरल jQuery यूआई समाधान है:

http://jqueryui.com/button/#radio

संशोधित कोड:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Button - Radios</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#radio" ).buttonset();
  });
  </script>
</head>
<body>

<form>
  <div id="radio">
    <input type="radio" id="radio1" name="radio"><label for="radio1"><img src="image1.gif" /></label>
    <input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2"><img src="image2.gif" /></label>
    <input type="radio" id="radio3" name="radio"><label for="radio3"><img src="image3.gif" /></label>
  </div>
</form>

</body>
</html>

jQueryUI इमेज बैकग्राउंड का ध्यान रखता है इसलिए आप जानते हैं कि कौन सा बटन चेक किया गया है।

खबरदार: यदि आप जावास्क्रिप्ट के माध्यम से चेक या अनचेक करने के लिए एक बटन सेट करना चाहते हैं, तो आपको रिफ्रेश फ़ंक्शन को कॉल करना होगा:

        $('#radio3').prop('checked', true).button("refresh");

Answer 7

छवियों को लेबल और स्पैन तत्वों का उपयोग करके रेडियो बटन के स्थान पर रखा जा सकता है।

   <div class="customize-radio">
        <label>Favourite Smiley</label><br>
        <label for="hahaha">
        <input type="radio" name="smiley" id="hahaha">
        <span class="haha-img"></span>
        HAHAHA
        </label>
        <label for="kiss">
        <input type="radio" name="smiley" id="kiss">
        <span class="kiss-img"></span>
        Kiss
        </label>
        <label for="tongueOut">
        <input type="radio" name="smiley" id="tongueOut">
        <span class="tongueout-img"></span>
        TongueOut
        </label>
    </div>

रेडियो बटन छिपा होना चाहिए,

.customize-radio label > input[type = 'radio'] {
    visibility: hidden;
    position: absolute;
}

स्पैन टैग में छवि दी जा सकती है,

.customize-radio label > input[type = 'radio'] ~ span{
    cursor: pointer;
    width: 27px;
    height: 24px;
    display: inline-block;
    background-size: 27px 24px;
    background-repeat: no-repeat;
}
.haha-img {
    background-image: url('hahabefore.png');
}

.kiss-img{
    background-image: url('kissbefore.png');
}
.tongueout-img{
    background-image: url('tongueoutbefore.png');
}

रेडियो बटन के क्लिक पर छवि को बदलने के लिए, इनपुट टैग में जाँच की गई स्थिति जोड़ें,

.customize-radio label > input[type = 'radio']:checked ~ span.haha-img{
     background-image: url('haha.png');
}
.customize-radio label > input[type = 'radio']:checked ~ span.kiss-img{
    background-image: url('kiss.png');
}
.customize-radio label > input[type = 'radio']:checked ~ span.tongueout-img{
        background-image: url('tongueout.png');
}

यदि आपके कोई प्रश्न हैं, तो नीचे दिए गए लिंक का संदर्भ लें, जैसा कि मैंने नीचे दिए गए ब्लॉग से समाधान लिया है, http://frontendsupport.blogspot.com/2018/06/cool-radio-buttons-with-images.html

Answer 8

यहाँ बहुत सरल उदाहरण है

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

input[type="radio"] + label
{
    background-image:url(http://www.clker.com/cliparts/c/q/l/t/l/B/radiobutton-unchecked-sm-md.png);
    background-size: 100px 100px;
    height: 100px;
    width: 100px;
    display:inline-block;
    padding: 0 0 0 0px;
    cursor:pointer;
}

input[type="radio"]:checked + label
{
    background-image:url(http://www.clker.com/cliparts/M/2/V/6/F/u/radiobutton-checked-sm-md.png);
}

<div>
  <input type="radio" id="shipadd1" value=1 name="address" />
  <label for="shipadd1"></label>
  value 1
</div>

<div>
  <input type="radio" id="shipadd2" value=2 name="address" />
  <label for="shipadd2"></label>
  value 2
</div>

डेमो: http://jsfiddle.net/La8wQ/2471/

इस ट्रिक पर आधारित यह उदाहरण: https://css-tricks.com/the-checkbox-hack/

मैंने इस पर परीक्षण किया: क्रोम, फ़ायरफ़ॉक्स, सफारी