रेडियो बटन के चारों ओर सीएसएस सीमाएं डालकर

Question

मैं कुछ रेडियो बटनों के आसपास एक गंदे लाल सीमा प्राप्त करने की कोशिश कर रहा हूं, लेकिन यह फ़ायरफ़ॉक्स नवीनतम या क्रोम नवीनतम में दिखाई नहीं दे रहा है। आईई 9/आईई 8 में ठीक काम करें।

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

सीएसएस:

input[data-val-required], select[data-val-required], textarea[data-val-required] 
{ 
    background-color: #F0FFFF; 
    border: 1px solid red; 
} 

स्रोत-देखें:

<label for="WaiveSelect">Do you waive confidentiality?</label><br /> 
<input data-val="true" data-val-number="The field WaiveSelect must be a number." data-val-required="Please select waive." id="WaiveSelect" name="WaiveSelect" type="radio" value="0" /> No, I do not waive confidentiality<br /> 
<input id="WaiveSelect_2" name="WaiveSelect" type="radio" value="2" /> Yes, I waive confidentiality<br /> 
<input id="WaiveSelect_3" name="WaiveSelect" type="radio" value="3" /> Yes, I waive confidentiality except to the client<br /> 
<span class="field-validation-valid" data-valmsg-for="WaiveSelect" data-valmsg-replace="true"></span> 

यह IE में की तरह दिखता है क्या (फ़ायरफ़ॉक्स और क्रोम कोई सीमाओं से पता चलता):

Answer 1

आप प्रत्येक < इनपुट प्रकार = "रेडियो" /> < div> टैग और यह एक सीमा देने के लिए और एक नाव को छोड़ दिया ... इस

<div style="border:1px solid red;float:left"> 
    <input type="radio".. /> 
</div> 
No, I do not waive confidentiality 

Answer 2

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

Answer 3

तरह के साथ इस http://jsfiddle.net/rp9HJ/1/ प्रयास करें लपेटकर द्वारा पूरा कर सकता है। यह आपकी मदद कर सकता है।

Answer 4

input[type=radio]{ 
    outline: 1px solid red 
} 

Answer 5

पूरा कोड jQuery

https://jsfiddle.net/xcb26Lzx/

$(function(){ 
     $('.layer').css('border',0); 
    $('input:radio').change(
    function(){ 
     if ($(this).is(':checked')) { 
      $('.layer').css('border','1px solid red'); 
     } 
    }); 
}); 

Answer 6

का उपयोग कर इस प्रयास करें ...

इनपुट चारों ओर एक div रखो और इतने तरह div करने के लिए एक वर्ग में निर्दिष्ट करें:

<div class="custom"><input type="radio"></div> 

फिर अपने कस्टम सीएसएस फ़ाइल को खोलने और इस सीएसएस

.custom {border: 1px solid red; border-radius: 30px; padding: 3px 3px 0 3px; background: red;} 

इस ऐड रेडियो बटन के चारों ओर एक अच्छा लाल बॉर्डर बनाना चाहिए। यदि आप चेक बॉक्स का उपयोग कर रहे हैं तो आप सीमा-त्रिज्या को हटा देंगे: सीएसएस से 30 पीएक्स। आपको बटन के केंद्र में थोड़ा सा पैडिंग के साथ खेलने की आवश्यकता हो सकती है, लेकिन यह मेरे लिए काम करता है।

संपादित करें: आप निम्न सीएसएस को div को भी असाइन करना चाहते हैं ताकि यह सही ढंग से लाइन हो।

.custom {display: inline;} 

fiddle link

Answer 7

मैं जानता हूँ कि यह चार साल पुराना है, लेकिन मैं एक अच्छा समाधान सीएसएस छद्म तत्वों का उपयोग कर के साथ आया था।

मेरी आवश्यकता एक अनचेक चेकबॉक्स, या सत्यापन में रेडियो बटन को हाइलाइट करना था।

<input type="radio" class="required" name="radio1"/> 

/* Radio button and Checkbox .required needs an after to show */ 
input[type=radio].required::after, input[type=checkbox].required::after { 
    display: block; 
    width: 100%; 
    height: 100%; 
    background: transparent; 
    content: ''; 
    border: 2px solid red !important; 
    box-sizing: border-box; 
} 
/* Radio buttons are round, so add 100% border radius. */ 
input[type=radio].required::after { 
    border-radius:100%; 
}