मेरा मतलब है, एक रेडियो बटन में एक गोल आकार और केंद्र में एक डॉट होता है (जब बटन चुना जाता है)। मैं जो बदलना चाहता हूं, वह दोनों का रंग है। क्या यह CSS का उपयोग करके किया जा सकता है?
मैं रेडियो बटन का रंग कैसे बदलूं?
जवाबों:
एक रेडियो बटन एक मूल तत्व है जो प्रत्येक OS / ब्राउज़र के लिए विशिष्ट है। इसका रंग / शैली बदलने का कोई तरीका नहीं है, जब तक कि आप कस्टम चित्र लागू नहीं करना चाहते हैं या एक कस्टम जावास्क्रिप्ट लाइब्रेरी का उपयोग करना चाहते हैं, जिसमें चित्र शामिल हैं (जैसे यह - कैश्ड लिंक )
मुझे ऐसा विश्वास है। कोई भी ब्राउज़र जिसे मैं रेडियो बटन के रूप को कॉन्फ़िगर करने का तरीका प्रस्तुत करता हूं, आपको इसे पूरा करने के लिए एक जेएस लाइब्रेरी का उपयोग करना होगा।
—
फ्रेड
या सीएसएस का उपयोग करें लेकिन आपको उस छवि की आवश्यकता है जैसे आपने कहा था। यह थोड़ा अजीब है
—
AturSams
पोस्ट 8/1/2014: यह विधि अब अक्षम प्रपत्र डेटा से इनपुट फ़ील्ड को अक्षम और हटा देगा। यह उन कंपनियों द्वारा दुर्व्यवहार के जवाब में है, जिन्होंने चेकबॉक्स को दृष्टि से बाहर रखा है, जो घोषित किया कि उनके उपयोगकर्ता अनुमति देने के लिए सहमत हैं और कार्यवाही करने से पहले आगंतुकों का मूल्यांकन नहीं किया जा सकता है। यदि शाब्दिक बटन स्क्रीन पर प्रदर्शित नहीं होता है, तो इसे 'अक्षम' माना जाता है
—
ppostma1
सीएसएस का उपयोग करके एक आधुनिक समाधान के लिए नीचे दिए गए मेरे उत्तर को पढ़ें।
—
क्लेविस
'यह' लिंक वर्तमान में 404'ing है। अगर यह कभी वापस आता है, तो हमें बताएं!
—
चिह्न
रेडियो बटन इनपुट शैली का उपयोग करने के लिए एक त्वरित फिक्स ओवरले होगा :after, हालांकि यह संभवतः अपने स्वयं के कस्टम टूलकिट बनाने के लिए एक बेहतर अभ्यास है।
input[type='radio']:after {
width: 15px;
height: 15px;
border-radius: 15px;
top: -2px;
left: -1px;
position: relative;
background-color: #d1d3d1;
content: '';
display: inline-block;
visibility: visible;
border: 2px solid white;
}
input[type='radio']:checked:after {
width: 15px;
height: 15px;
border-radius: 15px;
top: -2px;
left: -1px;
position: relative;
background-color: #ffa500;
content: '';
display: inline-block;
visibility: visible;
border: 2px solid white;
}<input type='radio' name="gender"/>
<input type='radio' name="gender"/>
इसने मेरे लिए अच्छा काम किया। जब आप कोई अतिरिक्त तत्व जोड़ना या चित्र का उपयोग नहीं करना चाहते तो बढ़िया समाधान।
—
स्वेन
सामान्य ब्राउज़रों में स्वीकार करते हैं ":" केवल कंटेनर तत्वों के लिए स्टाइल करने के बाद - जैसा कि डब्ल्यू 3 सी में परिभाषित किया गया है। इनपुट कोई कंटेनर नहीं है और इस प्रकार आमतौर पर स्टाइल के बाद समर्थन नहीं करता है। w3.org/TR/CSS2/generate.html#before-after-content
—
इना
पिछली टिप्पणियों को लागू करने के लिए बस एक टाइमस्टैम्प को रोकना - यह अभी भी केवल क्रोम (60.0.3112.90) में काम करता है। मैंने इसे Microsoft Edge (38.14393.1066.0) और फ़ायरफ़ॉक्स (54.0.1, 32-बिट) पर आज़माया लेकिन कोई पासा नहीं।
—
अंक
@Markreyes से अपडेट: क्रोम में काम करता है (64-बिट 73.0.3683.75), सफारी में कुछ हद तक काम करता है (12.0.3), और 15 मार्च 2019 को फ़ायरफ़ॉक्स (64-बिट 65.0.1) में काम नहीं करता है।
—
jarhit0
जैसा कि फ्रेड ने उल्लेख किया है, रंग, आकार, etcc के संबंध में देशी शैली के रेडियो बटन का कोई रास्ता नहीं है। लेकिन आप किसी भी दिए गए रेडियो बटन के नपुंसक को सेटअप करने के लिए CSS Pseudo तत्वों का उपयोग कर सकते हैं, और इसे स्टाइल कर सकते हैं। जेमीडी ने जो कहा, उस पर स्पर्श करते हुए कि हम कैसे उपयोग कर सकते हैं: छद्म तत्व के बाद, आप वांछनीय रूप प्राप्त करने के लिए: पहले और बाद में दोनों का उपयोग कर सकते हैं।
इस दृष्टिकोण के लाभ:
- अपने रेडियो बटन को स्टाइल करें और सामग्री के लिए एक लेबल भी शामिल करें।
- बाहरी रिम रंग और / या चेक सर्कल को अपने पसंद के किसी भी रंग में बदलें।
- इसे पृष्ठभूमि की रंग संपत्ति और / या अस्पष्टता संपत्ति के वैकल्पिक उपयोग के संशोधनों के साथ एक पारदर्शी रूप दें।
- अपने रेडियो बटन के आकार को मापें।
- सीएसएस ड्रॉप शैडो इनसेट जैसे विभिन्न ड्रॉप शैडो प्रॉपर्टीज को जहां जरूरत हो, वहां जोड़ें।
- इस सरल सीएसएस / एचटीएमएल ट्रिक को विभिन्न ग्रिड सिस्टम, जैसे बूटस्ट्रैप 3.3.6 में ब्लेंड करें, ताकि यह आपके बाकी के बूटस्ट्रैप घटकों से दृष्टिगत रूप से मेल खाता हो।
नीचे छोटे डेमो की व्याख्या:
- प्रत्येक रेडियो बटन के लिए एक रिश्तेदार लाइन ब्लॉक सेट करें
- देशी रेडियो बटन बोध को छिपाएं, इसे सीधे स्टाइल करने का कोई तरीका नहीं है।
- लेबल को स्टाइल और संरेखित करें
- CSS सामग्री को फिर से बनाना: 2 चीजों को करने के लिए छद्म तत्व से पहले - रेडियो बटन के बाहरी रिम को स्टाइल करें और पहले दिखाई देने के लिए तत्व सेट करें (लेबल सामग्री के बाएं)। आप यहां छद्म तत्वों पर बुनियादी कदम सीख सकते हैं - http://www.w3schools.com/css/css_pseudo_ele.asp
- यदि रेडियो बटन की जाँच की जाती है, तो सीएसएस सामग्री (रेडियो बटन में स्टाइल डॉट) को प्रदर्शित करने के लिए लेबल के लिए अनुरोध करें।
HTML
<div class="radio-item">
<input type="radio" id="ritema" name="ritem" value="ropt1">
<label for="ritema">Option 1</label>
</div>
<div class="radio-item">
<input type="radio" id="ritemb" name="ritem" value="ropt2">
<label for="ritemb">Option 2</label>
</div>सीएसएस
.radio-item {
display: inline-block;
position: relative;
padding: 0 6px;
margin: 10px 0 0;
}
.radio-item input[type='radio'] {
display: none;
}
.radio-item label {
color: #666;
font-weight: normal;
}
.radio-item label:before {
content: " ";
display: inline-block;
position: relative;
top: 5px;
margin: 0 5px 0 0;
width: 20px;
height: 20px;
border-radius: 11px;
border: 2px solid #004c97;
background-color: transparent;
}
.radio-item input[type=radio]:checked + label:after {
border-radius: 11px;
width: 12px;
height: 12px;
position: absolute;
top: 9px;
left: 10px;
content: " ";
display: block;
background: #004c97;
}इसे कार्रवाई में देखने के लिए एक छोटा डेमो
निष्कर्ष में, कोई जावास्क्रिप्ट, चित्र या बैटरी की आवश्यकता नहीं है। शुद्ध सीएसएस।
इस तकनीक ने मेरे लिए क्रोम (60.0.3112.90) में काम किया। मैंने इसे Microsoft Edge (38.14393.1066.0) और फ़ायरफ़ॉक्स (54.0.1, 32-बिट) पर भी आज़माया।
—
चिह्न
मेरे लिए सफारी 11.1 (नवीनतम) में काम करता है।
—
स्टेक्सिम
यदि आप वेबकिट-आधारित ब्राउज़र (Chrome और Safari, शायद आप Chrome WebApp विकसित कर रहे हैं, जो जानते हैं ...) को लक्षित कर रहे हैं, तो आप निम्नलिखित का उपयोग कर सकते हैं:
input[type='radio'] {
-webkit-appearance: none;
}और फिर इसे स्टाइल करें जैसे कि यह एक साधारण HTML एलिमेंट हो, उदाहरण के लिए बैकग्राउंड इमेज लगाना।
input[type='radio']:activeवैकल्पिक ग्राफिक्स प्रदान करने के लिए, इनपुट के चयन के लिए उपयोग करें
अपडेट : 2018 तक आप कई ब्राउज़र विक्रेताओं का समर्थन करने के लिए निम्नलिखित जोड़ सकते हैं:
input[type="radio"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
उपस्थिति को एक प्रायोगिक तकनीक के रूप में लेबल किया गया है: developer.mozilla.org/en-US/docs/Web/CSS/appearance
—
HBCondo
एक जादू की तरह काम किया!
—
सुपरकूल।
:activeउपयोग :checkedकरने के बजाय , आपको 'चयनित' रेडियो बटन के बीच स्टाइल का अंतर करने के लिए उपयोग करना चाहिए ।
आप दो शुद्ध सीएसएस तरीकों से अनुकूलित रेडियो बटन प्राप्त कर सकते हैं
CSS का उपयोग करके मानक उपस्थिति को हटाने
appearanceऔर कस्टम उपस्थिति को लागू करने के माध्यम से । दुर्भाग्य से यह डेस्कटॉप के लिए IE में काम नहीं करता है (लेकिन विंडोज फोन के लिए IE में काम करता है)। डेमो:input[type="radio"] { /* remove standard background appearance */ -webkit-appearance: none; -moz-appearance: none; appearance: none; /* create custom radiobutton appearance */ display: inline-block; width: 25px; height: 25px; padding: 6px; /* background-color only for content */ background-clip: content-box; border: 2px solid #bbbbbb; background-color: #e7e6e7; border-radius: 50%; } /* appearance for checked radiobutton */ input[type="radio"]:checked { background-color: #93e026; } /* optional styles, I'm using this for centering radiobuttons */ .flex { display: flex; align-items: center; }<div class="flex"> <input type="radio" name="radio" id="radio1" /> <label for="radio1">RadioButton1</label> </div> <div class="flex"> <input type="radio" name="radio" id="radio2" /> <label for="radio2">RadioButton2</label> </div> <div class="flex"> <input type="radio" name="radio" id="radio3" /> <label for="radio3">RadioButton3</label> </div>Via radiobutton को छुपाता है और कस्टम
labelरेडियोबूटन को 's pududoselector' की तरह दिखाता है। वैसे यहाँ पर पूर्ण स्थिति की कोई आवश्यकता नहीं है (मुझे अधिकांश डेमो में पूर्ण स्थिति दिखाई देती है)। डेमो:*, *:before, *:after { box-sizing: border-box; } input[type="radio"] { display: none; } input[type="radio"]+label:before { content: ""; /* create custom radiobutton appearance */ display: inline-block; width: 25px; height: 25px; padding: 6px; margin-right: 3px; /* background-color only for content */ background-clip: content-box; border: 2px solid #bbbbbb; background-color: #e7e6e7; border-radius: 50%; } /* appearance for checked radiobutton */ input[type="radio"]:checked + label:before { background-color: #93e026; } /* optional styles, I'm using this for centering radiobuttons */ label { display: flex; align-items: center; }<input type="radio" name="radio" id="radio1" /> <label for="radio1">RadioButton1</label> <input type="radio" name="radio" id="radio2" /> <label for="radio2">RadioButton2</label> <input type="radio" name="radio" id="radio3" /> <label for="radio3">RadioButton3</label>
आप सीएसएस ट्रिक्स में बताए गए चेकबॉक्स हैक का उपयोग कर सकते हैं
http://css-tricks.com/the-checkbox-hack/
रेडियो बटन का कार्य उदाहरण:
http://codepen.io/Angelata/pen/Eypnq
input[type=radio]:checked ~ .check {}
input[type=radio]:checked ~ .check .inside{}IE9 +, फ़ायरफ़ॉक्स 3.5+, सफारी 1.3+, ओपेरा 6+, क्रोम कुछ भी में काम करता है।
सरल क्रॉस ब्राउज़र कस्टम रेडियो बटन उदाहरण आपके लिए
.checkbox input{
display: none;
}
.checkbox input:checked + label{
color: #16B67F;
}
.checkbox input:checked + label i{
background-image: url('http://kuzroman.com/images/jswiddler/radio-button.svg');
}
.checkbox label i{
width: 15px;
height: 15px;
display: inline-block;
background: #fff url('http://kuzroman.com/images/jswiddler/circle.svg') no-repeat 50%;
background-size: 12px;
position: relative;
top: 1px;
left: -2px;
}<div class="checkbox">
<input type="radio" name="sort" value="popularity" id="sort1">
<label for="sort1">
<i></i>
<span>first</span>
</label>
<input type="radio" name="sort" value="price" id="sort2">
<label for="sort2">
<i></i>
<span>second</span>
</label>
</div>
यह बूटस्ट्रैप के लिए काम नहीं कर रहा है, क्या आप बूटस्ट्रैप के साथ pls अपडेट कर सकते हैं
—
कृष्ण जोनलगड्डा
वैसे अतिरिक्त तत्व बनाने के लिए जिनका हम उपयोग कर सकते हैं: बाद में: (इससे पहले कि हमें HTML को उतना बदलना न पड़े)। फिर रेडियो बटन और चेकबॉक्स के लिए हम उपयोग कर सकते हैं: चेक किया गया। कुछ अन्य छद्म तत्व हैं जिनका हम उपयोग कर सकते हैं (जैसे: होवर)। इनके मिश्रण का उपयोग करके हम कुछ बहुत अच्छे कस्टम फॉर्म बना सकते हैं। इसे देखो
संक्रमण के साथ इस सीएसएस की कोशिश करें:
$DarkBrown: #292321;
$Orange: #CC3300;
div {
margin:0 0 0.75em 0;
}
input[type="radio"] {
display:none;
}
input[type="radio"] + label {
color: $DarkBrown;
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;
cursor:pointer;
-moz-border-radius: 50%;
border-radius: 50%;
}
input[type="radio"] + label span {
background-color:$DarkBrown;
}
input[type="radio"]:checked + label span{
background-color:$Orange;
}
input[type="radio"] + label span,
input[type="radio"]:checked + label span {
-webkit-transition:background-color 0.4s linear;
-o-transition:background-color 0.4s linear;
-moz-transition:background-color 0.4s linear;
transition:background-color 0.4s linear;
}Html:
<div>
<input type="radio" id="radio01" name="radio" />
<label for="radio01"><span></span>Radio Button 1</label>
</div>
<div>
<input type="radio" id="radio02" name="radio" />
<label for="radio02"><span></span>Radio Button 2</label>
</div>मैंने छद्म तत्वों और एक छिपे हुए रेडियो इनपुट बटन के बाद /: का उपयोग करके शुद्ध css और ग्रेडिएंट्स के साथ कुछ प्ले करने के लिए @ klewis 'कोड नमूने का एक और कांटा बनाया ।
HTML:
sample radio buttons:
<div style="background:lightgrey;">
<span class="radio-item">
<input type="radio" id="ritema" name="ritem" class="true" value="ropt1" checked="checked">
<label for="ritema">True</label>
</span>
<span class="radio-item">
<input type="radio" id="ritemb" name="ritem" class="false" value="ropt2">
<label for="ritemb">False</label>
</span>
</div>:
सीएसएस:
.radio-item input[type='radio'] {
visibility: hidden;
width: 20px;
height: 20px;
margin: 0 5px 0 5px;
padding: 0;
}
.radio-item input[type=radio]:before {
position: relative;
margin: 4px -25px -4px 0;
display: inline-block;
visibility: visible;
width: 20px;
height: 20px;
border-radius: 10px;
border: 2px inset rgba(150,150,150,0.75);
background: radial-gradient(ellipse at top left, rgb(255,255,255) 0%, rgb(250,250,250) 5%, rgb(230,230,230) 95%, rgb(225,225,225) 100%);
content: "";
}
.radio-item input[type=radio]:checked:after {
position: relative;
top: 0;
left: 9px;
display: inline-block;
visibility: visible;
border-radius: 6px;
width: 12px;
height: 12px;
background: radial-gradient(ellipse at top left, rgb(245,255,200) 0%, rgb(225,250,100) 5%, rgb(75,175,0) 95%, rgb(25,100,0) 100%);
content: "";
}
.radio-item input[type=radio].true:checked:after {
background: radial-gradient(ellipse at top left, rgb(245,255,200) 0%, rgb(225,250,100) 5%, rgb(75,175,0) 95%, rgb(25,100,0) 100%);
}
.radio-item input[type=radio].false:checked:after {
background: radial-gradient(ellipse at top left, rgb(255,225,200) 0%, rgb(250,200,150) 5%, rgb(200,25,0) 95%, rgb(100,25,0) 100%);
}
.radio-item label {
display: inline-block;
height: 25px;
line-height: 25px;
margin: 0;
padding: 0;
}पूर्वावलोकन: https://www.codeply.com/p/y47T4ylfib
जैसा कि अन्य ने कहा, सभी ब्राउज़र में इसे प्राप्त करने का कोई तरीका नहीं है, इसलिए क्रॉसब्रोसर को ऐसा करने का सबसे अच्छा तरीका जावास्क्रिप्ट का उपयोग करना है। मूल रूप से आपको अपने रेडियोबूटन को लिंक में बदलना होगा (पूरी तरह से अनुकूलन सीएसएस के माध्यम से)। लिंक पर प्रत्येक क्लिक संबंधित रेडियोबॉक्स के लिए बाध्य होगा, जो उसके राज्य और अन्य सभी को टॉगल करेगा।
आप रेडियो इनपुट में एक स्पैन तत्व को एम्बेड कर सकते हैं, फिर रेडियो इनपुट की जाँच करने पर अपनी पसंद का रंग चुनें। नीचे दिए गए उदाहरण की जाँच करें w3schools से sourced।
<!DOCTYPE html>
<html>
<style>
/* The container */
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default radio button */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom radio button */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #00a80e;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the indicator (dot/circle) */
.container .checkmark:after {
top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}
</style>
<body>
<h1>Custom Radio Buttons</h1>
<label class="container">One
<input type="radio" checked="checked" name="radio">
<span class="checkmark"></span>
</label>
<label class="container">Two
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>
<label class="container">Three
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>
<label class="container">Four
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>
</body>नीचे इस कोड सेगमेंट में बैकग्राउंड कलर बदलने से ट्रिक आती है।
/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #00a80e;
}से प्राप्त एक कस्टम रेडियो बटन बनाने के लिए
निम्नलिखित सीएसएस संपत्ति का उपयोग करने के लिए एक सरल सुधार होगा।
input[type=radio]:checked{
background: \*colour*\;
border-radius: 15px;
border: 4px solid #dfdfdf;
}