एचटीएमएल रेडियो बटन: छुपाएं गोलियां

Question

मैं रेडियो बटन के रूप में कार्य करने के लिए एक विशेष रूप घटक चाहता हूं (एक समय में केवल एक विकल्प चुना जा सकता है)। मैं नहीं चाहता कि रेडियो बुलेट दिखाना चाहते हैं, हालांकि, वैकल्पिक प्रस्तुति विधियों जैसे उच्च प्रकाश चयनित, या किसी अन्य विधि का चयन करना। यह सुंदर गिरावट की अनुमति देगा: यदि उपयोगकर्ता ब्राउज़र जावास्क्रिप्ट का समर्थन नहीं करता है तो यह केवल मूल रेडियो बटनों में गिरावट आएगा। मैं जावास्क्रिप्ट या सीएसएस के माध्यम से बुलेट बटन छिपाना चाहता हूं। किसी को पता है कैसे? धन्यवाद।

Answer 1

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

1) कार्यक्रम इस का उपयोग कर जावास्क्रिप्ट/jQuery:

आपके पास दो विकल्प। इस बात को ध्यान में रखते हुए मैं सुझाव दूंगा कि आप प्रारंभिक प्लेसहोल्डर के रूप में रेडियो बटन का उपयोग करें और फिर जावास्क्रिप्ट (आदर्श रूप से एक jquery प्लगइन के माध्यम से) का उपयोग करें जो पृष्ठ को फिर से खींचा जाएगा और क्लिक करने योग्य divs और गतिशील रूप से बदलते छिपे हुए फ़ील्ड मान वाले बटन को प्रतिस्थापित करेगा।

2) CSS meta class of :checked का उपयोग करें जो दुर्भाग्यवश क्रॉस ब्राउज़र समर्थन नहीं दिखता है।

Answer 2

आप इस शैली को जोड़कर कर सकते हैं = "सूची-शैली: कोई नहीं;"

Answer 3

$('#js input[type=radio]').hide(); 

Answer 4

var inputs = document.getElementById('my-form').getElementsByTagName('input'); 

for (var i = 0, inputsLength = inputs.length;i < inputsLength; i++) { 

    var input = inputs[i]; 

    if (input.getAttribute('type') == 'radio') { 
     input.style.display = 'none'; 
    } 

} 

वैकल्पिक रूप से, आपके ब्राउज़र यह (querySelectorAll in document) का समर्थन करता है ...

document.querySelectorAll('#my-form input[type="radio"]').style.display = 'none'; 

Answer 5

मुझे नहीं लगता कि आप इसे सीएसएस से छुपा सकते हैं। आपको radiobuttons को छिपाना होगा और फिर जेएस के साथ कार्यक्षमता को प्रतिस्थापित करना होगा। शायद ली की एक चुनिंदा सूची आपके लिए काम करेगी।

jQuery यूआई चयन से: http://jqueryui.com/demos/selectable/

<input type='radio' value='1' name='rad' class='radio'> 
<input type='radio' value='2' name='rad' class='radio'> 
<input type='radio' value='3' name='rad' class='radio'> 

<ol id="selectable" style='display:none'> 
    <li class="ui-widget-content">Item 1</li> 
    <li class="ui-widget-content">Item 2</li> 
    <li class="ui-widget-content">Item 3</li> 
</ol> 

$(function() { 
    $('.radio').hide(); 
    $("#selectable").show().selectable({ 
     selected: function(event, ui) {//figure out which was selected and mark the hidden radio button} 
    }); 
}); 

Answer 6

मैं एक साधारण काम कर रहा है, जहां मैं एक छवि बात का प्रतिनिधित्व करने के साथ अपने रेडियो बटन आसपास के कोई लेबल समाधान मिल गया है चुने जाने:

<label> 
    <input type="radio" name="foo"> 
    <img src="..."> 
</label> 

मैंने निम्नलिखित शैलियों को लागू किया है:

label { 
    float: left; 
    width: 100px; 
    height: 100px; 
    position: relative; 
    cursor: pointer; 
} 

label input[type=radio] { 
    opacity: 0; 
} 

label img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    opacity: 0.5; 
} 

:checked + img { 
    opacity: 1; 
} 

अनिवार्य रूप से प्रत्येक label एक नियमित आकार का बॉक्स बन जाता है जो पूरी तरह से img से भरा हुआ है। रेडियो स्वयं opacity:0 का उपयोग कर छुपा हुआ है। उपयोगकर्ता बता सकता है कि चेक किए गए रेडियो के बगल में img के रूप में क्या चुना जाता है, जबकि अन्य अर्ध-पारदर्शी होते हैं। आप कई अन्य प्रकार के प्रभावों को आसानी से कर सकते हैं।

मुझे पसंद है यह बात यह है कि यह प्रक्रिया प्रक्रिया के लिए सरल है, केवल रेडियो बटन का एक समूह है।

मैंने display:none या visibility:hidden के बजाय रेडियो बटन के लिए अस्पष्टता का उपयोग किया, तब भी वे अभी भी टैबइंडेक्स में हैं और फॉर्म कीबोर्ड तक पहुंच योग्य है।

Answer 7

बस रेडियो बटन छुपा (बेशक, पहुंच खोने के बिना) के सा निम्नलिखित सीएसएस के साथ किया जा सकता है:

input[type="radio"] { 
    left: -999em; 
    position: absolute; 
} 

opacity: 0; का प्रयोग के रूप में बटन अभी भी वहाँ है, ले, आदर्श नहीं है पेज में अप स्पेस। इसे देखने से बाहर की स्थिति तय करने का तरीका है।

Answer 8

बस डालें: style="display:none;" प्रत्येक "<input type='radio'…>" टैग के अंदर।

इससे गोलियां अदृश्य हो जाती हैं, लेकिन लेबल दिखाती हैं।