क्या चयनित रेडियो बटन के केंद्र सर्कल का रंग बदलना संभव है

Question

क्या कम से कम वेबकिट ब्राउज़र में चयनित रेडियो बटन के केंद्र सर्कल को स्टाइल करना संभव है?

क्या मैं अब है:

मुझे क्या करना चाहते हैं:

मैं, पृष्ठभूमि रंग बदल सकते हैं आदि छाया के रूप में

#searchPopup input[type="radio"]{ 
    -webkit-appearance:none; 
    box-shadow: inset 1px 1px 1px #000000; 
    background:#fff; 
} 

#searchPopup input[type="radio"]:checked{ 
    -webkit-appearance:radio; 
    box-shadow: none; 
    background:rgb(252,252,252); 
} 

कोई भी विचार इस प्रकार है ..?

Answer 1

आप कुछ दौर सीमा चाल का उपयोग कर (आंतरिक चक्र रेंडर करने के लिए) और छद्म तत्व :before (बाहरी सर्कल रेंडर करने के लिए) सौभाग्य radio प्रकार का एक इनपुट क्षेत्र पर इस्तेमाल किया जा सकता है जो रेडियो बटन की नकल कर सकते हैं:

input[type='radio'] { 
    -webkit-appearance:none; 
    width:20px; 
    height:20px; 
    border:1px solid darkgray; 
    border-radius:50%; 
    outline:none; 
    box-shadow:0 0 5px 0px gray inset; 
} 

input[type='radio']:hover { 
    box-shadow:0 0 5px 0px orange inset; 
} 

input[type='radio']:before { 
    content:''; 
    display:block; 
    width:60%; 
    height:60%; 
    margin: 20% auto;  
    border-radius:50%;  
} 
input[type='radio']:checked:before { 
    background:green; 
} 

Working Demo.

Answer 2

जब रेडियो बटन चेक किया गया है तुम भी एक पृष्ठभूमि छवि लागू हो सकते हैं

[type="radio"]:checked { 
    width: 16px; 
    height: 16px; 
    -webkit-appearance: none; 
    background-image: ... 
} 

एक उदाहरण: http://jsfiddle.net/yZ6tM/

Answer 3

आप जो भी चाहें रेडियो-बटन और स्टाइल लेबल को छुपा सकते हैं, उससे आप रेडियो-बटन को लेबल करने के लिए बाध्य कर सकते हैं। Example।

div { 
 
    background-color: #444444; 
 
    display: flex-column; 
 
    display:webkit-flex-column; 
 
} 
 
input { 
 
    margin: 10px; 
 
    position: absolute; 
 
    left: 100px; 
 
} 
 
label { 
 
    box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    margin: 10px; 
 
    display: block; 
 
    width: 30px; 
 
    height: 30px; 
 
    border-radius: 50%; 
 
    -webkit-border-radius: 50%; 
 
    background-color: #ffffff; 
 
    box-shadow: inset 1px 0 #000000; 
 
} 
 
#green { 
 
    border: 8px solid green; 
 
} 
 
#red { 
 
    border: 8px solid red; 
 
} 
 
input:checked + #green { 
 
    border: 8px solid #ffffff; 
 
    background-color:green !important; 
 
} 
 
input:checked + #red { 
 
    border: 8px solid #ffffff; 
 
    background-color: red !important; 
 
}

Click a button on the left - radio button on the right will be checked. 
 
<div> 
 
    <input id="greenInput" type="radio" name="someName"> 
 
    <label id="green" for="greenInput"> </label> 
 
    <input id="redInput" type="radio" name="someName"> 
 
    <label id="red" for="redInput"></label> 
 
</div>