रेडियो बटन बड़ा बनाएं?

Question

क्या सीएसएस का उपयोग कर रेडियो बटन बड़ा करने का कोई तरीका है?

यदि नहीं, तो मैं इसे और कैसे कर सकता हूं?

Answer 1

इस लिंक इसकी सहायता से आप

http://www.thecssninja.com/css/custom-inputs-using-css

Answer 2

रेडियो तत्वों के अंदर कुछ quirky <span> चालें हो सकती हैं लेकिन मुझे लगता है कि विभिन्न ब्राउज़रों में उनका उपयोग करने से उन्हें डीबग करने में परेशानी होगी।

मैंने अतीत में this script का उपयोग किया है लेकिन हाल ही में नहीं।

Answer 3

आप इसे इस पर सीएसएस लेकिन ब्राउज़र और OS भी प्रभाव का उपयोग कर सकते हो सकता है देखते हैं। निम्नलिखित लेख देखें।

Styling radio buttons with CSS

Answer 4

आप इसे स्थापित करने के लिए आसानी से सक्षम कर सकते हैं ऊंचाई और किसी भी तत्व के साथ के रूप में चौड़ाई है।

यहाँ कोड के साथ बेला

JSFIDDLE BIG RADIO BUTTON

एचटीएमएल

<input id="r1" type="radio" name="group1" class="radio1" /> 
<label for="r1">label 1 text</label> 
<input id="r2" type="radio" name="group1" class="radio2" /> 
<label for="r2">label 2 text</label> 
<input id="r3" type="radio" name="group1" class="radio3" /> 
<label for="r3">label 3 text</label> 
<input id="r4" type="radio" name="group1" class="radio4" /> 
<label for="r4">label 4 text</label> 

सीएसएस

input[type=radio] { 
    display: none; 
} 
input[type=radio] + label::before { 
    content: ''; 
    display: inline-block; 
    border: 1px solid #000; 
    border-radius: 50%; 
    margin: 0 0.5em; 
} 
input[type=radio]:checked + label::before { 
    background-color: #ffa; 
} 

.radio1 + label::before { 
    width: 0.5em; 
    height: 0.5em; 
} 

.radio2 + label::before { 
    width: 0.75em; 
    height: 0.75em; 
} 

.radio3 + label::before { 
    width: 1em; 
    height: 1em; 
} 

.radio4 + label::before { 
    width: 1.5em; 
    height: 1.5em; 
} 

स्टाइलिंग रेडियो बटन नहीं है टी आसान है।

सामान्य रूप से फॉर्म तत्व CSS alone का उपयोग कर शैली के लिए समस्याग्रस्त या असंभव हैं।

बस रेडियो बटन के लिए बड़ा आकार के साथ अपनी शैली के लिए इस लिंक पर जाना चाहिए ..

इसके अलावा इस लिंक पर देखो ...

Bigger radio buttons

Answer 5

आज़माएं:

एचटीएमएल

<label> 
    <input type="radio" value="1"> 
    <div></div> 
</label> 

सीएसएस

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

input[type="radio"] + div { 
    height: 20px; 
    width: 20px; 
    display: inline-block; 
    cursor: pointer; 
    vertical-align: middle; 
    background: #FFF; 
    border: 1px solid #d2d2d2; 
    border-radius: 100%; 
} 

input[type="radio"] + div:hover { 
    border-color: #c2c2c2; 
} 

input[type="radio"]:checked + div { 
    background:gray; 
} 

डेमो: http://jsfiddle.net/nuzhysgg/

Answer 6

इस कोड का प्रयास करें:

input[type='radio'] { transform: scale(2); }