I am trying to customize Radio buttons on bootstrap but it is not working, When i try outside bootstrap environment in plain HTML it works, Below is code for HTML followed by CSS I am using
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
My Current AMP Policies
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Financial Planning and Retirement Advice
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3">
LifeCover
</label>
</div>
THE CSS
.newradio input[type=radio] {display: none;}
.newradio label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
margin-right: 15px;
font-size: 13px;
}
.newradio label:before {
content: "";
display: inline-block;
width: 14px;
height: 14px;
border-radius: 7px;
margin-right: 10px;
position: absolute;
left: 0;
bottom: 3px;
background-color: #fff;
border:solid 1px #bcb882;
}
.newradio input[type=radio]:checked + .newradio label:before {
content: "";
background: url(../../Content/images/radio-check.png);
display: inline-block;
}
The reason for .newradio is I am using that div as parent class of above given HTML, I am getting proper display of my Radios but Checked status (the image radio-check) is not showing, I tried using color change instead of background image but that doesn't work either.
Does anyone has experience in customizing radio button in bootstrap? please guide
Manoj Soni
You need to find the bootstrap css class and overwrite it. Or use ID instead of class in the css. When that also don't work try !important.
Related
This question already has answers here:
How to remove jQuery Mobile styling?
(5 answers)
Closed 2 years ago.
I want some customized radio buttons in Jquery mobile page. So I used CSS to customize the radio buttons. But unfortunately, the used CSS is overided by the jquery default css.
My HTML code snippet is as follows.
<div class="answers">
<label class="container-quiz">Doe
<input type="radio" checked="checked" value="doe" name="answer2">
<span class="checkmark"></span>
</label>
<label class="container-quiz">Kit
<input type="radio" value="kit" name="answer2">
<span class="checkmark"></span>
</label>
<label class="container-quiz">Buck
<input type="radio" value="buck" name="answer2">
<span class="checkmark"></span>
</label>
<label class="container-quiz">Hare
<input type="radio" value="hare" name="answer2">
<span class="checkmark"></span>
</label>
</div>
My CSS is as follows
.container-quiz {
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-quiz 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: white;
border-radius: 50%;
border: 2px solid gray;
}
/* On mouse-over, add a grey background color */
.container-quiz:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.container-quiz input:checked ~ .checkmark {
background-color: white;
border: 2px solid gray;
}
/* 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-quiz input:checked ~ .checkmark:after {
display: block;
}
/* Style the indicator (dot/circle) */
.container-quiz .checkmark:after {
top: 3px;
left: 3px;
width: 19px;
height: 19px;
border-radius: 50%;
background: #f4364c;
}
When I remove the jquery js scripts from the <head> I get the result which I want and it is like below.
But when I have jquery I don't get the result I want.
Your style is completely diffrent from that of JQM and You already have a complete CSS for Your radio buttons.
So the fastest way is to tell JQM to avoid to enhance that elements. Add data-role="none" to Your inputs.
<div class="answers">
<label class="container-quiz">Doe
<input data-role="none" type="radio" checked="checked" value="doe" name="answer2">
<span class="checkmark"></span>
</label>
<label class="container-quiz">Kit
<input data-role="none" type="radio" value="kit" name="answer2">
<span class="checkmark"></span>
</label>
<label class="container-quiz">Buck
<input data-role="none" type="radio" value="buck" name="answer2">
<span class="checkmark"></span>
</label>
<label class="container-quiz">Hare
<input data-role="none" type="radio" value="hare" name="answer2">
<span class="checkmark"></span>
</label>
</div>
Otherwise, You need to override the JQM .ui-radio-off, .ui-radio-on, .ui-radio-off:after, .ui-radio-on:after styles (the standard radio buttons are already hidden by JQM).
Use !important property on properties which are being overriden
I am trying to edit the way radio buttons appear in CSS and trying to do it with the label encompassing the button and not using the label for function.
In other words, I don't want to use this:
<input type="radio" name="rb" id="rb2" />
<label for="rb2">Hello</label>
I want to use this:
<label><input type="radio" name="rb" />Hello</label>
The reason for this is that the HTML is dynamically generated and I cannot create an id or other field in the input. When I add the css to modify the button/text it doesn't work because it requires the label to be on the text only and "for" to be used. Here is the CSS:
.container{
display: block;
position: relative;
margin: 40px auto;
height: auto;
width: 500px;
padding: 20px;
font-family: 'Lato', sans-serif;
font-size:18px;
border:2px
solid #ccc;
overflow-y: scroll;
resize: both;
}
.container input[type=radio]:checked ~ .check {
border: 5px solid #0DFF92;
}
.container input[type=radio]:checked ~ .check::before{
background: #0DFF92;
}
.container input[type=radio]:checked ~ label{
color: #0DFF92;
}
It works if I put the
<div class="container>
<input type="radio" name="rb" value="Hello" id=rb2"/>
<label for="rb2">Hello</label>
<input type="radio" name="rb" value="Goodbye" id="rb3"/>
<label for="rb3">Goodbye</label>
</div>
But not with
<div class="container>
<label> <input type="radio" name="rb" value="Hello">Hello</label>
<label><input type="radio" name="rb" value="Goodbye">Goodbye</label>
</div>
Any suggestions? Thank you so much!
You would have to use javascript. You can't navigate back up the dom tree in css, so since you want the input to be inside the label and the css to affect the label based on the the input, you'd have to use js to detect the change and apply the styling to its parent.
I am adding background image on radio button. But my issue is image is not on checked or click on radio button(background image).
Here is my code
.form-group input[type="radio"] {
display: none;
}
.gender input[type="radio"] + label::after {
background:url('img/male.png') no-repeat -7px -81px;
width: 28px;
height: 56px; }
.gender input[type="radio"]:checked + label::before {
background:url('img/m-f-icon.png') no-repeat;
width: 28px;
height: 56px;
display: inline-block;
position: relative;
content: ' ';
margin-right: 10px;
cursor: pointer;
background-position-x: -45px;
}
<div class="form-group gender">
<label class="control-label col-xs-2">I'm a</label>
<div class="col-xs-1">
<input type="radio" class="male" name="genderRadios" value="male">
<label class="radio-inline gender"></label>
</div>
<div class="col-xs-1">
<input type="radio" class="female" name="genderRadios" value="female">
<label class="radio-inline gender"></label>
</div>
</div>
Kindly advise me any solution.
Please find demo below I have put together, this is the correct structure you should be using with the appropriate for specified on each of your labels that match the related radio button. You can switch out the background colours for background images of your choice.
JSFiddle:
https://jsfiddle.net/kdrh56md/
I am trying to customize the look of my checkboxes using font-awesome and to have all the text of the labels correctly indented. I have customized the look of the checkboxes which makes the usual approaches to indent the text not working as I am hiding the actual checkbox (see the CSS below).
Currently, I obtain the following (left) while I would like the one on the right:
I used the following code (see the JSFiddle):
CSS
Inspired by this simple CSS checkboxes, I use the following to format my checkboxes with font-awesome:
input[type=checkbox] {
display:none;
}
input[type=checkbox] + label:before {
font-family: FontAwesome;
display: inline-block;
content: "\f096";
letter-spacing: 10px;
cursor: pointer;
}
input[type=checkbox]:checked + label:before {
content: "\f046";
}
input[type=checkbox]:checked + label:before {
letter-spacing: 8px;
}
HTML
<input type="checkbox" id="box1" checked="">
<label for="box1">Item 1: some long text...</label>
<br>
<input type="checkbox" id="box2" checked="">
<label for="box2">Item 2: some long text...</label>
<br>
<input type="checkbox" id="box3">
<label for="box3">Item 3: some long text...</label>
I have tried to modify the margin-left and text-indent attributes of the label and label:before selectors but without any success.
Any idea how I could have the correct indent while using the nice font-awesome icons?
Thank you very much for your help!
Add this style (tested both on Chrome and Firefox)
label {
display: block;
padding-left: 1.5em;
text-indent: -.7em;
}
http://jsfiddle.net/tkt4zsmc/2/
Final result:
After trying fcalderan's suggestion and not being able to get the values for padding-left and text-indent right for different browsers, I switched to a flex box. It is pretty green nowadays.
If you put the input/label pairs in divs as it is recommended by Mozilla, you can style them this way.
fieldset {
width: 13ch;
}
fieldset > div {
display: flex;
}
fieldset > div > * {
align-self: baseline;
}
fieldset > div > input[type=checkbox] {
margin: 0 0.5ch 0 0;
width: 1em;
height: 1em;
}
<fieldset>
<legend>Sichtbarkeit</legend>
<div>
<input id="c1" checked="" type="checkbox">
<label for="c1">Minuten</label>
</div>
<div>
<input id="c2" checked="" type="checkbox">
<label for="c2">Nur Minuten, die Vielfache von 5 sind</label>
</div>
<div>
<input id="c3" checked="" type="checkbox">
<label for="c3">Stunden</label>
</div>
<div>
<input id="c4" checked="" type="checkbox">
<label for="c4">Nur 12 Stunden</label>
</div>
</fieldset>
Based on the answer by Fabrizio Calderan, I used the following modifications to the CSS:
label{
display: inline-block;
margin-left: 20px;
}
label:before{
margin-left: -23px;
}
The advantage is that it does not modify the spacing between the items. You can see the final results in JSFiddle.
I've been trying to make custom radio buttons work. I had been using check boxes but found that I needed to restrict the checked options to one. I've been looking at examples/tutorials that I found using Google and thought I understood enough for a simple set of 4 radio buttons but ...
They display correctly initially with the first button checked but checking on other buttons just displays the checked PNG: a previously checked button does not revert to unchecked state.
The buttons are arranged sequentially horizontally in their own div.
HTML
<div class='radio'>
<input id='B12' type='radio' class='radiobutton' checked>
<label id='lblB12' class='radiobutton-label' for='B12'>IR </label>
<input id='BBW' type='radio' class='radiobutton' >
<label id='lblBBW' class='radiobutton-label' for='BBW'>Wide</label>
<input id='B10' type='radio' class='radiobutton' >
<label id='lblB10' class='radiobutton-label' for='B10'>B10</label>
<input id='B8' type='radio' class='radiobutton' >
<label id='lblB8' class='radiobutton-label' for='B8'>B8 </label>
</div>
CSS3
.radiobutton-label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
margin-right: 15px;
font-size: 15px;
}
input[type="radio"] {
display: none;
margin: 10px;
}
.radiobutton-label:before {
content:"";
display: inline-block;
width: 24px;
height: 24px;
margin-right: 10px;
position: absolute;
left: 0;
bottombottom: 1px;
background: url(resources/CheckBoxUnchecked.png) left top;
}
input[type=radio]: + label:before {
background: url(resources/CheckBoxUnchecked.png) left top;
}
input[type=radio]:checked + label:before {
background: url(resources/CheckBoxOK.png) left top;
}
This is the first web page that I have attempted.
Relevant Spec - 17 Forms / 17.2.1 Control types
Radio buttons are like checkboxes except that when several share the same control name, they are mutually exclusive: when one is switched "on", all others with the same name are switched "off".
Therefore if you want the radio elements to be mutually exclusive, just give them all the same name attribute. In this instance, I just used name="checkboxes".
Updated HTML EXAMPLE HERE
<div class='radio'>
<input id='B12' type='radio' class='radiobutton' name="checkboxes" checked="checked"/>
<label id='lblB12' class='radiobutton-label' for='B12'>IR </label>
<input id='BBW' type='radio' class='radiobutton' name="checkboxes"/>
<label id='lblBBW' class='radiobutton-label' for='BBW'>Wide</label>
<input id='B10' type='radio' class='radiobutton' name="checkboxes"/>
<label id='lblB10' class='radiobutton-label' for='B10'>B10</label>
<input id='B8' type='radio' class='radiobutton' name="checkboxes"/>
<label id='lblB8' class='radiobutton-label' for='B8'>B8 </label>
</div>
Base CSS:
input[type=radio] + label:before {
background: url('http://www.csscheckbox.com/checkboxes/vlad.png') 2px 4px no-repeat;
}
input[type=radio]:checked + label:before {
background: url('http://www.csscheckbox.com/checkboxes/vlad.png') 2px -18px no-repeat;
}