Hello im trying to allign vertically text next to my radio-button, but its getting crashed.
.radio {
cursor: pointer;
display: inline-flex;
}
.cui-a-radio-button__input {
display: none;
}
.cui-a-radio-button__input:disabled + .cui-a-radio-button-style {
opacity: 0.3;
}
.cui-a-radio-button-style {
border-radius: 50%;
margin-right: 10px;
box-sizing: border-box;
padding: 2px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
}
<label for="Radio3" class="radio">
<input type="radio" name="RadioField" id="Radio3" class="cui-a-radio-button__input" disabled>
<div class="cui-a-radio-button-style">disabled</div>
</label>
I have tried to add "vertical allign: top" to label but id does not work.
Result i have:
Try adding align-items:center on your radio class!
for displaying a text beside radio button, just place the text inside your input tag. label tag is for another purpose.
<input type="radio" disabled> disabled </input>
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 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.
I'm trying to style my radio buttons but for some reason it's not working. If I click on the one radio button then it works but the problem comes in is when I click on another radio button. What happens is that the first one I clicked stays checked and the second one I click is also checked instead of the first one becoming unchecked.
My html
<li>
<label>* Title</label>
<div class="registration_title">
<input id="mr" type="radio" name="title[mr]" value="Mr">
<label for="mr"><span></span>Mr.</label>
<input id="mrs" type="radio" name="title[mrs]" value="Mrs">
<label for="mrs"><span></span>Mrs.</label>
</div>
my css
input[type="radio"] {
display: none;
}
input[type="radio"] + label {
color: green;
}
input[type="radio"] + label span {
background: none repeat scroll 0 0 black;
border-radius: 50%;
cursor: pointer;
display: inline-block;
height: 19px;
margin: -1px 4px 0 0;
vertical-align: middle;
width: 19px;
}
input[type="radio"]:checked + label span {
background: pink;
}
Here is a jsfiddle: JSFIDDLE
The name should be same in radio buttons..
try this..
<div class="registration_title">
<input id="mr" type="radio" name="title" value="Mr">
<label for="mr"><span></span>Mr.</label>
<input id="mrs" type="radio" name="title" value="Mrs">
<label for="mrs"><span></span>Mrs.</label>
</div>
here is the FIDDLE
refer THIS to understand about radio buttons
Try to use name as common for radio buttons you used like this:
HTML:
name="title[mr]"
Demo
I want to add a style to a radio button's selected label:
HTML:
<div class="radio-toolbar">
<label><input type="radio" value="all" checked>All</label>
<label><input type="radio" value="false">Open</label>
<label><input type="radio" value="true">Archived</label>
</div>
CSS
.radio-toolbar input[type="radio"] {display:none;}
.radio-toolbar label {
background:Red;
border:1px solid green;
padding:2px 10px;
}
.radio-toolbar label + input[type="radio"]:checked {
background:pink !important;
}
Any ideas what I'm doing wrong?
.radio-toolbar input[type="radio"] {
display: none;
}
.radio-toolbar label {
display: inline-block;
background-color: #ddd;
padding: 4px 11px;
font-family: Arial;
font-size: 16px;
cursor: pointer;
}
.radio-toolbar input[type="radio"]:checked+label {
background-color: #bbb;
}
<div class="radio-toolbar">
<input type="radio" id="radio1" name="radios" value="all" checked>
<label for="radio1">All</label>
<input type="radio" id="radio2" name="radios" value="false">
<label for="radio2">Open</label>
<input type="radio" id="radio3" name="radios" value="true">
<label for="radio3">Archived</label>
</div>
First of all, you probably want to add the name attribute on the radio buttons. Otherwise, they are not part of the same group, and multiple radio buttons can be checked.
Also, since I placed the labels as siblings (of the radio buttons), I had to use the id and for attributes to associate them together.
If you really want to put the checkboxes inside the label, try adding an extra span tag, eg.
HTML
<div class="radio-toolbar">
<label><input type="radio" value="all" checked><span>All</span></label>
<label><input type="radio" value="false"><span>Open</span></label>
<label><input type="radio" value="true"><span>Archived</span></label>
</div>
CSS
.radio-toolbar input[type="radio"]:checked ~ * {
background:pink !important;
}
That will set the backgrounds for all siblings of the selected radio button.
You are using an adjacent sibling selector (+) when the elements are not siblings. The label is the parent of the input, not it's sibling.
CSS has no way to select an element based on it's descendents (nor anything that follows it).
You'll need to look to JavaScript to solve this.
Alternatively, rearrange your markup:
<input id="foo"><label for="foo">…</label>
You can add a span to your html and css .
Here's an example from my code ...
HTML ( JSX ):
<input type="radio" name="AMPM" id="radiostyle1" value="AM" checked={this.state.AMPM==="AM"} onChange={this.handleChange}/>
<label for="radiostyle1"><span></span> am </label>
<input type="radio" name="AMPM" id="radiostyle2" value="PM" checked={this.state.AMPM==="PM"} onChange={this.handleChange}/>
<label for="radiostyle2"><span></span> pm </label>
CSS to make standard radio button vanish on screen and superimpose custom button image:
input[type="radio"] {
opacity:0;
}
input[type="radio"] + label {
font-size:1em;
text-transform: uppercase;
color: white ;
cursor: pointer;
margin:auto 15px auto auto;
}
input[type="radio"] + label span {
display:inline-block;
width:30px;
height:10px;
margin:1px 0px 0 -30px;
cursor:pointer;
border-radius: 20%;
}
input[type="radio"] + label span {
background-color: #FFFFFF
}
input[type="radio"]:checked + label span{
background-color: #660006;
}
Just use label:focus-within {} to style a label with a checked radio or checkbox.
Here's an accessible solution
label {
position: relative;
}
label input {
position: absolute;
opacity: 0;
}
label:focus-within {
outline: 1px solid orange;
}
<div class="radio-toolbar">
<label><input type="radio" value="all" checked>All</label>
<label><input type="radio" value="false">Open</label>
<label><input type="radio" value="true">Archived</label>
</div>
As TimStieffenhofer mentioned in their answer, the easiest way is to have the input field as a child of the label and use the :focus-within pseudo-class on the label.
If you want to hide your radio button and set the input to hidden or display none, that will no longer work.
The work around is to give the input field a z-index of -1 (or any z-index lower than the parent label).
As there is currently no CSS solution to style a parent, I use a simple jQuery one here to add a class to a label with checked input inside it.
$(document).on("change","input", function(){
$("label").removeClass("checkedlabel");
if($(this).is(":checked")) $(this).closest("label").addClass("checkedlabel");
});
Don't forget to give the pre-checked input's label the class checkedlabel too