2012-08-28 11 views
15

Google क्रोम में, रेडियो बटन सर्कल के चारों ओर एक अवांछित सफेद पृष्ठभूमि दिखाते हैं। यह फ़ायरफ़ॉक्स में इरादे से नहीं दिखाया गया है।रेडियो बटन क्रोम में अवांछित सफेद पृष्ठभूमि दिखाते हैं। फ़ायरफ़ॉक्स ठीक है

कृपया इन छवियों को जांचें। enter image description here

और उसकी समस्या आ पेज के सीधा संबंध है (फ़ायरफ़ॉक्स और क्रोम में जाँच) https://my.infocaptor.com/dash/mt.php?pa=hr_dashboard3_503c135bce6f4

किसी भी सीएसएस चाल है कि मैं क्रोम के लिए आवेदन कर सकते हैं?

+4

http://stackoverflow.com/questions/9838583/radio-button-background-goes-white-in-windows-chrome-when-using-webkit-backface – calsign

+0

मैंने उस प्रश्न को देखा लेकिन कोई समाधान नहीं था – Nilesh

+0

I क्रोम में पृष्ठभूमि समस्या नहीं दिख रही है - क्या यह हल हो गया है? – zenkaty

उत्तर

1

यह known क्रोम में बग है जिसमें असली कामकाज नहीं है।

इस बिंदु पर मैं देख और उपयोग करने का एकमात्र विकल्प चेक बॉक्स की छवियों के साथ एक स्प्राइट शीट का उपयोग करना है।

Workaround

एचटीएमएल:

<div id="show"> 
    <input type="radio" id="r1" name="rr" /> 
    <label for="r1"><span></span>Radio Button 1</label> 
<p /> 
    <input type="radio" id="r2" name="rr" /> 
    <label for="r2"><span></span>Radio Button 2</label> 
</div> 

सीएसएस:

div#show { 
    width:100%; 
    height: 100%; 
    background:black; 
    margin: 10px; 
    padding: 10px; 
} 

input[type="radio"] { 
    /* Uncomment this to only see the working radio button */ 
    /* display:none; */ 
} 

input[type="radio"] + label { 
    color:#f2f2f2; 
    font-family:Arial, sans-serif; 
    font-size:14px; 
} 

input[type="radio"] + label span { 
    display:inline-block; 
    width:19px; 
    height:19px; 
    margin:-1px 4px 0 0; 
    vertical-align:middle; 
    background:url(http://d3pr5r64n04s3o.cloudfront.net/tuts/391_checkboxes/check_radio_sheet.png) -38px top no-repeat; 
    cursor:pointer; 
} 

input[type="radio"]:checked + label span { 
    background:url(http://d3pr5r64n04s3o.cloudfront.net/tuts/391_checkboxes/check_radio_sheet.png) -57px top no-repeat; 
} 

Radiobuttons with sprite

मैं कुछ यादृच्छिक स्प्राइट मैं इंटरनेट पर पाया साथ आप के लिए यह दिखाने के लिए एक बेला बनाया

आप रेडियो बट के साथ अपना खुद का स्प्राइट बना सकते हैं आपके वांछित डिजाइन में ऑन ...

आशा है कि यदि आपके कोई और प्रश्न हैं, तो मुझे मदद करें।

-Hannes

+0

ओह, और यदि आप केवल क्रोम ब्राउज़र के लिए इसका उपयोग करना चाहते हैं, तो यह पोस्ट बहुत उपयोगी लगता है: http://stackoverflow.com/questions/2447511/can-you-target-google-chrome-yes-you-can –

1

लपेटें 100px करने के लिए एक div में रेडियो तत्व, और छिपा हुआ है कि div के अतिप्रवाह निर्धारित करते हैं, और बॉर्डर-त्रिज्या। फिर ब्लॉक प्रदर्शित करने के लिए रेडियो इनपुट सेट करें, और कोई मार्जिन नहीं। यह मेरे लिए काम किया:

मार्कअप:

<div class="radio_contain"> 
    <input type="radio" id="r1" name="r1"> 
</div> 

सीएसएस:

.radio_contain { 
    display: inline-block; 
    border-radius: 100px; 
    overflow: hidden; 
    padding: 0; 
} 
.radio_contain input[type="radio"] { 
    display: block; 
    margin: 0; 
} 
1

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

zoom: 0.999; 

दाएं सीएसएस वर्ग में और यह मेरे लिए तय किया गया।