क्या सीएसएस में रेडियो बटन के आकार को नियंत्रित करने का कोई तरीका है?
CSS का उपयोग करके रेडियो बटन का आकार कैसे बदलें?
जवाबों:
हां, आपको किसी भी तत्व के साथ इसकी ऊंचाई और चौड़ाई निर्धारित करने में सक्षम होना चाहिए। हालांकि, कुछ ब्राउज़र वास्तव में इन गुणों को ध्यान में नहीं रखते हैं।
यह डेमो विभिन्न ब्राउज़रों में क्या संभव है और कैसे प्रदर्शित होता है, इसका अवलोकन देता है: https://www.456bereastreet.com/lab/styling-form-controls-revisited/radio-button/
जैसा कि आप देखेंगे, रेडियो बटन को स्टाइल करना आसान नहीं है :- डी
कस्टम बटन के साथ रेडियो बटन और अन्य फार्म तत्वों को बदलने के लिए जावास्क्रिप्ट और सीएसएस का उपयोग करने के लिए एक समाधान है:
5
चौड़ाई और ऊंचाई दोनों का उपयोग करें और उन्हें ई-मीट्रिक का उपयोग करें: चौड़ाई: 1.2em; ऊंचाई: 1.2em;
—
इमान
अब आप CSS3 का उपयोग कर सकते हैं , और यह काम करता है।
—
जोहो पिमेंटेल फरेरा
यह सीएसएस चाल करने के लिए लगता है:
input[type=radio] {
border: 0px;
width: 100%;
height: 2em;
}बॉर्डर को 0 पर सेट करने से लगता है कि उपयोगकर्ता बटन के आकार को बदलने की अनुमति देता है और ब्राउज़र को उस आकार में रेंडर करता है जैसे। ऊपर की ऊँचाई: 2em लाइन की ऊँचाई पर बटन को दो बार प्रस्तुत करेगा। यह चेकबॉक्स ( input[type=checkbox]) के लिए भी काम करता है । कुछ ब्राउज़र दूसरों की तुलना में बेहतर प्रस्तुत करते हैं।
विंडोज़ बॉक्स से यह IE8 +, FF21 +, Chrome29 + में काम करता है।
क्रोमियम में मेरे लिए छोटा बना।
—
पॉकेटैंड
पुराना सवाल है, लेकिन अब एक सरल समाधान है, जो अधिकांश ब्राउज़रों के अनुकूल है, जिसका उपयोग करना है CSS3। मैंने IE, फ़ायरफ़ॉक्स और क्रोम में परीक्षण किया और यह काम करता है।
input[type="radio"] {
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
transform: scale(1.5);
}मान बदलें 1.5, इस स्थिति में आपकी आवश्यकताओं के अनुसार आकार में 50% की वृद्धि। यदि अनुपात बहुत अधिक है, तो यह रेडियो बटन को धुंधला कर सकता है। अगली छवि में 1.5 का अनुपात दिखाया गया है।
यह समाधान, हालांकि काम करता है, रेडियो बटन धुंधली बनाता है। इसका उपयोग न करें।
—
वादिम
यह पैमाने की मात्रा पर निर्भर करेगा। 1.5 के अनुपात में यह ठीक है।
—
जोहो पिमेंटेल फरेरा
आप पैमाने की मात्रा को नियंत्रित नहीं कर सकते। एक उपयोगकर्ता डेस्कटॉप (या मोबाइल डिवाइस पर) ज़ूम करने का निर्णय ले सकता है, जिस स्थिति में रेडियो बटन भयानक दिखेंगे।
—
वादिम
@Vadim I ने अब क्रोम में परीक्षण किया, 1.5 का अनुपात और ज़ूम 300% और यह पूरी तरह से ठीक है।
—
जोहो पिमेंटेल फरेरा
मेरे अपेक्षाकृत कम रिज़ॉल्यूशन मॉनिटर (1920 x 1080) पर, रेडियो बटन 100% के ज़ूम स्तर पर भी काफी धुंधला है। रेटिना प्रदर्शित होने पर, यह और भी अधिक धुंधला हो जाएगा। इन दिनों भी कुछ सेल फोन एक उच्च संकल्प है कि मेरी निगरानी है। जैसा कि मैंने पहले कहा था, आप एक छवि के स्केलिंग को नियंत्रित नहीं कर सकते। यह कुछ स्क्रीन पर ठीक लग सकता है। यह आप पर ठीक लग सकता है, लेकिन समाधान सार्वभौमिक नहीं है।
—
वादिम
आप सीएसएस शैली के साथ रेडियो बटन के आकार को नियंत्रित कर सकते हैं:
शैली = "ऊंचाई: 35 पीएक्स; चौड़ाई: 35 पीएक्स;"
यह सीधे रेडियो बटन के आकार को नियंत्रित करता है।
<input type="radio" name="radio" value="value" style="height:35px; width:35px; vertical-align: middle;">
इसके विलोपन को रोकने के लिए, कृपया संपादित करें और बताएं कि यह क्यों काम करता है।
—
रोहित गुप्ता
@ रोहित गुप्ता आप शैली बदल सकते हैं = "ऊंचाई: 35 पीएक्स; चौड़ाई: 35 पीएक्स;" रेडियो बटन के आकार को नियंत्रित करने के लिए।
—
तारिक
मैंने यह कोशिश की और मुझे काफी आश्चर्य हुआ कि इसने IE, एज और क्रोम पर अच्छा काम किया। फ़ायरफ़ॉक्स, इतना नहीं।
—
zippy72
प्रत्यक्ष नहीं। वास्तव में, सामान्य रूप से तत्व तत्व या तो समस्याग्रस्त हैं या अकेले सीएसएस का उपयोग करना असंभव है। सबसे अच्छा तरीका है:
- जावास्क्रिप्ट का उपयोग कर रेडियो बटन छिपाएँ।
- HTML जोड़ने / प्रदर्शित करने के लिए जावास्क्रिप्ट का उपयोग करें जिसे स्टाइल किया जा सकता है कि आप कैसे पसंद करते हैं
- चयनित राज्य के लिए सीएसएस नियमों को परिभाषित करें, जिसे योर स्पैन में "चयनित" वर्ग जोड़कर ट्रिगर किया गया है।
- अंत में, रेडियो बटन की स्थिति पर क्लिक करने के लिए रेडियो बटन की स्थिति पर प्रतिक्रिया करने के लिए जावास्क्रिप्ट लिखें, और, इसके विपरीत, रेडियो बटन की स्थिति में परिवर्तन के लिए प्रतिक्रिया करने के लिए अवधि प्राप्त करने के लिए (जब उपयोगकर्ता प्रपत्र का उपयोग करने के लिए कीबोर्ड का उपयोग करते हैं)। इसका दूसरा भाग सभी ब्राउज़रों में काम करने के लिए मुश्किल हो सकता है। मैं निम्नलिखित की तरह कुछ का उपयोग करता हूं (जो कि jQuery का भी उपयोग करता है। मैं स्टाइल के द्वारा अतिरिक्त स्पैन को जोड़ने और "चयनित" वर्ग को सीधे इनपुट लेबल पर लागू करने से बचता हूं)।
जावास्क्रिप्ट
var labels = $("ul.radioButtons).delegate("input", "keyup", function () { //keyboard use
if (this.checked) {
select($(this).parent());
}
}).find("label").bind("click", function (event) { //mouse use
select($(this));
});
function select(el) {
labels.removeClass("selected");
el.addClass("selected");
}एचटीएमएल
<ul class="radioButtons">
<li>
<label for="employee1">
employee1
<input type="radio" id="employee1" name="employee" />
</label>
</li>
<li>
<label for="employee2">
employee1
<input type="radio" id="employee2" name="employee" />
</label>
</li>
</ul>डिफ़ॉल्ट विजेट का आकार बदलना सभी ब्राउज़रों में काम नहीं करता है, लेकिन आप जावास्क्रिप्ट के साथ कस्टम रेडियो बटन बना सकते हैं। इनमें से एक तरीका है छिपे हुए रेडियो बटन बनाना और फिर अपने चित्रों को अपने पेज पर रखना। इन छवियों पर क्लिक करने से छवियां बदल जाती हैं (क्लिक की गई छवि को एक चयनित राज्य में रेडियो बटन के साथ एक छवि के साथ बदल देता है और अन्य छवियों को एक अचयनित स्थिति में रेडियो बटन के साथ बदल देता है) और नए रेडियो बटन का चयन करता है।
वैसे भी, इस विषय पर प्रलेखन है। उदाहरण के लिए, इसे पढ़ें: स्टाइलिंग चेकबॉक्स और रेडियो बटन सीएसएस और जावास्क्रिप्ट के साथ ।
यहाँ एक दृष्टिकोण है। डिफ़ॉल्ट रूप से रेडियो बटन लेबल से लगभग दोगुने बड़े थे।
(जवाब के अंत में सीएसएस और एचटीएमएल कोड देखें)
Safari: 10.0.3
Chrome: 56.0.2924.87
Firefox: 50.1.0
Internet Explorer: 9 (फिजनेस नहीं IE की गलती, netrenderer.com पर होस्ट की गई परीक्षा)
सीएसएस:
.sortOptions > label {
font-size: 8px;
}
.sortOptions > input[type=radio] {
width: 10px;
height: 10px;
}HTML:
<div class="rightColumn">Answers
<span class="sortOptions">
<input type="radio" name="answerSortList" value="credate"/>
<label for="credate">Creation</label>
<input type="radio" name="answerSortList" value="lastact"/>
<label for="lastact">Activity</label>
<input type="radio" name="answerSortList" value="score"/>
<label for="score">Score</label>
<input type="radio" name="answerSortList" value="upvotes"/>
<label for="upvotes">Up votes</label>
<input type="radio" name="answerSortList" value="downvotes"/>
<label for="downvotes">Down Votes</label>
<input type="radio" name="answerSortList" value="accepted"/>
<label for="downvotes">Accepted</label>
</span>
</div> <!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
input[type="radio"] {
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
transform: scale(1.5);
}
</style>
</head>
<body>
<div class="container">
<h2>Form control: inline radio buttons</h2>
<p>The form below contains three inline radio buttons:</p>
<form>
<label class="radio-inline">
<input type="radio" name="optradio">Option 1
</label>
<label class="radio-inline">
<input type="radio" name="optradio">Option 2
</label>
<label class="radio-inline">
<input type="radio" name="optradio">Option 3
</label>
</form>
</div>
</body>
</html>
एक उत्तर देने के लिए धन्यवाद, कुछ स्पष्टीकरण अच्छा होगा :)
—
Tha'er M. Al-Ajlouni
सीधे तौर पर आप ऐसा नहीं कर सकते। [मेरे ज्ञान के अनुसार]।
आपको imagesरेडियो बटन को दबाने के लिए उपयोग करना चाहिए । आप उन्हें उसी तरह से कार्य कर सकते हैं जैसे कि रेडियो बटन सबसे ज्यादा मामलों में करते हैं, और आप उन्हें अपने मनचाहे आकार में बना सकते हैं।
यह उत्तर बेहद अशुभ है - बेशक आप इसे सीधे कर सकते हैं। और नहीं, आपको पहली बार में छवियों का उपयोग करने की कोशिश नहीं करनी चाहिए - यह आपके पृष्ठ पर अतिरिक्त अनावश्यक ब्लोट का कारण बनेगा
—
जसदीप खालसा
आप स्केल में आवश्यक मान के साथ ट्रांसफ़ॉर्म प्रॉपर्टी का भी उपयोग कर सकते हैं:
input[type=radio]{transform:scale(2);}
João Pimentel Ferreira के उत्तर का डुप्लिकेट
—
ग्लेनग
यह मेरे लिए सभी ब्राउज़रों में ठीक काम करता है:
(सादगी के लिए इनलाइन स्टाइल ...)
<label style="font-size:16px;">
<input style="height:1em; width:1em;" type="radio">
<span>Button One</span>
</label>रेडियो बटन और टेक्स्ट दोनों का आकार लेबल के फ़ॉन्ट-आकार के साथ बदल जाएगा।
इस कोड को आज़माएं ... यह as हो सकता है जो आप वास्तव में खोज रहे हैं
body, html{
height: 100%;
background: #222222;
}
.container{
display: block;
position: relative;
margin: 40px auto;
height: auto;
width: 500px;
padding: 20px;
}
h2 {
color: #AAAAAA;
}
.container ul{
list-style: none;
margin: 0;
padding: 0;
overflow: auto;
}
ul li{
color: #AAAAAA;
display: block;
position: relative;
float: left;
width: 100%;
height: 100px;
border-bottom: 1px solid #333;
}
ul li input[type=radio]{
position: absolute;
visibility: hidden;
}
ul li label{
display: block;
position: relative;
font-weight: 300;
font-size: 1.35em;
padding: 25px 25px 25px 80px;
margin: 10px auto;
height: 30px;
z-index: 9;
cursor: pointer;
-webkit-transition: all 0.25s linear;
}
ul li:hover label{
color: #FFFFFF;
}
ul li .check{
display: block;
position: absolute;
border: 5px solid #AAAAAA;
border-radius: 100%;
height: 25px;
width: 25px;
top: 30px;
left: 20px;
z-index: 5;
transition: border .25s linear;
-webkit-transition: border .25s linear;
}
ul li:hover .check {
border: 5px solid #FFFFFF;
}
ul li .check::before {
display: block;
position: absolute;
content: '';
border-radius: 100%;
height: 15px;
width: 15px;
top: 5px;
left: 5px;
margin: auto;
transition: background 0.25s linear;
-webkit-transition: background 0.25s linear;
}
input[type=radio]:checked ~ .check {
border: 5px solid #0DFF92;
}
input[type=radio]:checked ~ .check::before{
background: #0DFF92;
}<ul>
<li>
<input type="radio" id="f-option" name="selector">
<label for="f-option">Male</label>
<div class="check"></div>
</li>
<li>
<input type="radio" id="s-option" name="selector">
<label for="s-option">Female</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="t-option" name="selector">
<label for="t-option">Transgender</label>
<div class="check"><div class="inside"></div></div>
</li>
</ul>
आपकी टिप्पणी और मार्गदर्शन के लिए धन्यवाद। स्टैक ओवरफ्लो की नई बाइ। यह गूगल की मदद से अपने आप से पता चला था, हालांकि मैं दूसरों को बचा सकता हूं। इसलिए मैंने इसे यहाँ पोस्ट किया ...
—
मौसमी
@Mausumi हाँ, लेकिन कैसे और क्यों काम करता है के रूप में कुछ अतिरिक्त स्पष्टीकरण यह एक बहुत बेहतर ढेर अतिप्रवाह उत्तर :-)
—
Starbeamrainbowlabs
<html>
<head>
</head>
<body>
<style>
.redradio {border:5px black solid;border-radius:25px;width:25px;height:25px;background:red;float:left;}
.greenradio {border:5px black solid;border-radius:25px;width:29px;height:29px;background:green;float:left;}
.radiobuttons{float:left;clear:both;margin-bottom:10px;}
</style>
<script type="text/javascript">
<!--
function switchON(groupelement,groupvalue,buttonelement,buttonvalue) {
var groupelements = document.getElementById(groupelement);
var buttons = groupelements.getElementsByTagName("button");
for (i=0;i<buttons.length;i++) {
if (buttons[i].id.indexOf("_on") != -1) {
buttons[i].style.display="none";
} else {
buttons[i].style.display="block";
}
}
var buttonON = buttonelement + "_button_on";
var buttonOFF = buttonelement + "_button_off";
document.getElementById(buttonON).style.display="block";
document.getElementById(buttonOFF).style.display="none";
document.getElementById(groupvalue).value=buttonvalue;
}
// -->
</script>
<form>
<h1>farbige Radiobutton</h1>
<div id="button_group">
<input type="hidden" name="button_value" id="button_value" value=""/>
<span class="radiobuttons">
<button type="button" value="OFF1" name="button1_button_off" id="button1_button_off" onclick="switchON('button_group','button_value','button1',this.value)" class="redradio"></button>
<button type="button" value="ON1" name="button1_button_on" id="button1_button_on" style="display:none;" class="greenradio"></button>
<label for="button1_button_on"> Ich will eins</label>
</span><br/>
<span class="radiobuttons">
<button type="button" value="OFF2" name="button2_button_off" id="button2_button_off" onclick="switchON('button_group','button_value','button2',this.value)" class="redradio"></button>
<button type="button" value="ON2" name="button2_button_on" id="button2_button_on" style="display:none;" class="greenradio"></button>
<label for="button2_button_on"> Ich will zwei</label>
</span><br/>
<span class="radiobuttons">
<button type="button" value="OFF3" name="button3_button_off" id="button3_button_off" onclick="switchON('button_group','button_value','button3',this.value)" class="redradio"></button>
<button type="button" value="ON3" name="button3_button_on" id="button3_button_on" style="display:none;" class="greenradio"></button>
<label for="button3_button_on"> Ich will drei</label>
</span><br/>
<span class="radiobuttons">
<button type="button" value="OFF4" name="button4_button_off" id="button4_button_off" onclick="switchON('button_group','button_value','button4',this.value)" class="redradio"></button>
<button type="button" value="ON4" name="button4_button_on" id="button4_button_on" style="display:none;" class="greenradio"></button>
<label for="button4_button_on"> Ich will vier</label>
</span>
</div>
</form>
</body>
</html>
यह कैसे काम करता है इस पर टिप्पणी या विवरण होना उपयोगी होता।
—
जेम्स ए मोहलर
और यह आपके स्रोत की शुरुआत में संरचनात्मक त्रुटियों को ठीक नहीं करने के लिए उपयोगी होता।
—
मिस्टर लिस्टर