I have used two radio buttons to select the gender of applicant and gender of applicant's child.But both of them does not works.Can anyone help me with this?
My codes are given below
input[type=radio] {
position: absolute;
visibility: hidden;
display: none;
}
label {
color: #9a929e;
display: inline-block;
cursor: pointer;
font-weight: bold;
padding: 5px 20px;
}
input[type=radio]:checked + label {
color: #ccc8ce;
background: #675f6b;
}
<input type="radio" id="option-one" name="selector" checked>
<label for="option-one">One</label>
<input type="radio" id="option-two" name="selector">
<label for="option-two">Two</label>
<input type="radio" id="option-one" name="selector_one" checked>
<label for="option-one">One</label>
<input type="radio" id="option-two" name="selector_one">
<label for="option-two">Two</label>
An "id" can be used only once in an html page. Each "id" must be unique.
input[type=radio] {
position: absolute;
visibility: hidden;
display: none;
}
label {
color: #9a929e;
display: inline-block;
cursor: pointer;
font-weight: bold;
padding: 5px 20px;
}
input[type=radio]:checked + label {
color: #ccc8ce;
background: #675f6b;
}
<input type="radio" id="option-one" name="selector" checked>
<label for="option-one">One</label>
<input type="radio" id="option-two" name="selector">
<label for="option-two">Two</label>
<input type="radio" id="option-one2" name="selector_one" checked>
<label for="option-one2">One</label>
<input type="radio" id="option-two2" name="selector_one">
<label for="option-two2">Two</label>
Related
I've created this custom radio selector for my site and the first radio selector is working but the 2nd field isn't selecting. Is there another class that I need to create or have each input named a different ID so they don't conflict with one another? I'm trying to create multiple options for a customer to select an option.
input[type=radio] {
position: absolute;
visibility: hidden;
display: none;
}
label {
display: inline-block;
cursor: pointer;
font-weight: bold;
padding: 5px 20px;
}
input[type=radio]:checked+label {
color: #fff;
background: #444;
border-radius: 5px;
}
label+input[type=radio]+label {
border-left: solid 3px #444;
}
.radio-group {
display: inline-block;
overflow: hidden;
}
<div class="radio-group">
<input type="radio" id="lessthan6months" name="timeline"><label for="lessthan6months">6 mo</label>
<input type="radio" id="6to12months" name="timeline"><label for="6to12months">6-12 mo</label>
<input type="radio" id="12to24months" name="timeline"><label for="12to24months">12-24 mo</label>
<div class="line"></div>
</div>
<div class="radio-group">
<input type="radio" id="tradein_y" name="tradein" value="Yes"><label for="trade in yes">Yes</label>
<input type="radio" id="tradein_n" name="tradein" value="No"><label for="trade in no">No</label>
<div class="line"></div>
</div>
The for of the label content has to match the id of the input.
This will work, like this:
input[type=radio] {
position: absolute;
visibility: hidden;
display: none;
}
label {
display: inline-block;
cursor: pointer;
font-weight: bold;
padding: 5px 20px;
}
input[type=radio]:checked+label {
color: #fff;
background: #444;
border-radius: 5px;
}
label+input[type=radio]+label {
border-left: solid 3px #444;
}
.radio-group {
display: inline-block;
overflow: hidden;
}
<div class="radio-group">
<input type="radio" id="lessthan6months" name="timeline"><label for="lessthan6months">6 mo</label>
<input type="radio" id="6to12months" name="timeline"><label for="6to12months">6-12 mo</label>
<input type="radio" id="12to24months" name="timeline"><label for="12to24months">12-24 mo</label>
<div class="line"></div>
</div>
<div class="radio-group">
<input type="radio" id="tradein_y" name="tradein" value="Yes"><label for="tradein_y">Yes</label>
<input type="radio" id="tradein_n" name="tradein" value="No"><label for="tradein_n">No</label>
<div class="line"></div>
</div>
My checkboxes are autogenerated as a list so I can not change that and I have tried do modify css code I have found while searching but I can not get it to work properly.
I want to make my checkboxes look like this but instead they look like this
.chk-btn>li {
margin: 4px;
background-color: #EFEFEF;
border-radius: 4px;
border: 1px solid #D0D0D0;
overflow: auto;
float: left;
}
.chk-btn>li label {
float: left;
width: 4.0em;
}
.chk-btn>li label {
text-align: center;
padding: 3px 0px;
display: block;
}
.chk-btn>li label input {
position: absolute;
top: -20px;
}
.chk-btn>li input:checked {
background-color: #911;
color: #fff;
}
<div class="green-content">
<form>
<div>
<ul class="chk-btn">
<li>
<label for="con-1">
choice1
</label>
<input id="con-1" name="con" type="checkbox" value="1">
</li>
<li>
<label for="con-2">
choice2
</label>
<input id="con-2" name="con" type="checkbox" value="2">
</li>
<li>
<label for="con-3">
choice3
</label>
<input id="con-3" name="con" type="checkbox" value="3">
</li>
<li>
<label for="con-4">
choice4
</label>
<input id="con-4" name="con" type="checkbox" value="4">
</li>
</ul>
</div>
</form>
</div>
How do I get it right?
And also have a them change to darker color when hover?
Hiding the input and usage of label and + selector based on input checked or hover state is really helpful for such a scenario. I have removed css which was not needed and also switched position of input and label tags with each other for + to work like so :-
.chk-btn>li {
display:inline-flex;
margin: 4px;
background-color: #EFEFEF;
border-radius: 4px;
border: 1px solid #D0D0D0;
overflow: auto;
}
.chk-btn>li label {
text-align: center;
padding: 3px 0px;
width: 4.0em;
}
.chk-btn>li input {
display: none;
}
.chk-btn>li input:checked + label {
background-color: #911;
color: #fff;
}
.chk-btn>li input:hover + label {
background-color: #580716;
color: #fff;
}
<div class="green-content">
<form>
<div>
<ul class="chk-btn">
<li>
<input id="con-1" name="con" type="checkbox" value="1">
<label for="con-1">
choice1
</label>
</li>
<li>
<input id="con-2" name="con" type="checkbox" value="2">
<label for="con-2">
choice2
</label>
</li>
<li>
<input id="con-3" name="con" type="checkbox" value="3">
<label for="con-3">
choice3
</label>
</li>
<li>
<input id="con-4" name="con" type="checkbox" value="4">
<label for="con-4">
choice4
</label>
</li>
</ul>
</div>
</form>
</div>
I am trying to make custom radio button and I want to overlap the <input type="radio" into div.
input[type="radio"]:checked+div {
color: #fff;
background-color: rgb(13, 50, 218);
}
<input type="radio" name="favorite_pet" value="Parrot">
<div>Parrot</div><br>
<input type="radio" name="favorite_pet" value="Dog">
<div>Dog</div><br>
The main goal is to select by text div instead of radio button.
Current Layout:
Expected Layout:
How can I select the div instead of radio button with overlapping?
You should use a label with for and hide the radio button
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + label {
color: #fff;
background-color: rgb(13, 50, 218);
}
<input type="radio" name="favorite_pet" value="Parrot" id="rb1">
<label for="rb1">Parrot</label><br>
<input type="radio" name="favorite_pet" value="Dog" id="rb2">
<label for="rb2">Dog</label><br>
If you have issues giving them ids, you can wrap the whole thing in a label and use another element for the text like a span.
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + span {
color: #fff;
background-color: rgb(13, 50, 218);
}
<label>
<input type="radio" name="favorite_pet" value="Parrot">
<span>Parrot</span>
</label><br>
<label>
<input type="radio" name="favorite_pet" value="Dog">
<span>Dog</span>
</label><br>
Wrap the text in label elements:
input[type="radio"]:checked+span {
color: #fff;
background-color: rgb(13, 50, 218);
}
input {
display: none;
}
span {
display: block;
}
<label><input type="radio" name="favorite_pet" value="Parrot">
<span>Parrot</span></label><br>
<label><input type="radio" name="favorite_pet" value="Dog">
<span>Dog</span></label><br>
Then change your divs to spans since the divs can't exist in labels.
Wrap input inside label.
label, span{
font-family: sans-serif;
display: block;
margin-bottom: 10px;
font-size: 18px;
}
input[type="radio"] {
position: absolute;
visibility: hidden;
}
input[type="radio"]:checked + span{
background: blue;
color: #fff;
}
input[type="radio"] + span:before {
content: '\2610';
margin-right: 10px;
font-size: 20px;
}
input[type="radio"]:checked + span:before {
content: '\2611';
}
<label>
<input type="radio" name="group">
<span>Parrot</span>
</label>
<label>
<input type="radio" name="group">
<span>Dog</span>
</label>
I have requirement of radio buttons with on/off method i.e when click on one radio button it should on and when click on second button first button should off but below code is not working as per my expectation.
Here is the snippet for that html and css code:
body {
background: #0288D1;
}
.checkboxes-and-radios {
margin: 80px auto 0;
width: 280px;
padding: 30px;
background: #fafafa;
input {
display: none;
}
label {
cursor: pointer;
padding-right: 35px;
position: relative;
display: block;
font-size: 18px;
padding: 15px 0
}
input[type="checkbox"],
input[type="radio"] {
position: absolute;
visibility: hidden !important;
}
input[type="checkbox"]+label,
input[type="radio"]+label {
&:before,
&:after {
content: '';
position: absolute;
top: 50%;
margin-top: -7.5px;
box-sizing: border-box;
}
&:before {
width: 30px;
height: 15px;
right: 0px;
background: #fff;
border: 1px solid #e4e3e1;
border-radius: 15px;
}
&:after {
width: 15px;
height: 15px;
right: 15px;
background: #BDBDBD;
border-radius: 50%;
transition: all 200ms ease-out;
}
}
input[type="checkbox"]:checked+label,
input[type="radio"]:checked+label {
&:after {
right: 0px;
background: #FF9800;
}
}
}
<div class="checkboxes-and-radios">
<h1>Radios:</h1>
<input type="radio" name="radio-cats" id="radio-1" value="1" checked>
<label for="radio-1">Radio Label 1</label>
<input type="radio" name="radio-cats" id="radio-2" value="2">
<label for="radio-2">Radio Label 2</label>
<input type="radio" name="radio-cats" id="radio-3" value="3" checked>
<label for="radio-3">Radio Label 3</label>
<h1>Checkboxes:</h1>
<input type="checkbox" name="checkbox-cats[]" id="checkbox-1" value="1" checked>
<label for="checkbox-1">Checkbox Label 1</label>
<input type="checkbox" name="checkbox-cats[]" id="checkbox-2" value="2">
<label for="checkbox-2">Checkbox Label 2</label>
<input type="checkbox" name="checkbox-cats[]" id="checkbox-3" value="3" checked>
<label for="checkbox-3">Checkbox Label 3</label>
</div>
expected output:
so how to add css that will look like in image shown in top?
Your code works like a charm for me. In your provided fiddle, the SCSS was not compiled to CSS. Here a compiled version. Radio buttons are switching correctly.
Here also a version on CodePen.
Your CSS is not CSS but SCSS, which has to be compiled to CSS.
You have to use a preprocessor to compile scss to css. You should start reading here:
http://sass-lang.com
body {
background: #0288D1;
}
.checkboxes-and-radios {
margin: 80px auto 0;
width: 280px;
padding: 30px;
background: #fafafa;
}
.checkboxes-and-radios input {
display: none;
}
.checkboxes-and-radios label {
cursor: pointer;
padding-right: 35px;
position: relative;
display: block;
font-size: 18px;
padding: 15px 0;
}
.checkboxes-and-radios input[type="checkbox"],
.checkboxes-and-radios input[type="radio"] {
position: absolute;
visibility: hidden !important;
}
.checkboxes-and-radios input[type="checkbox"]+label:before,
.checkboxes-and-radios input[type="checkbox"]+label:after,
.checkboxes-and-radios input[type="radio"]+label:before,
.checkboxes-and-radios input[type="radio"]+label:after {
content: '';
position: absolute;
top: 50%;
margin-top: -7.5px;
box-sizing: border-box;
}
.checkboxes-and-radios input[type="checkbox"]+label:before,
.checkboxes-and-radios input[type="radio"]+label:before {
width: 30px;
height: 15px;
right: 0px;
background: #fff;
border: 1px solid #e4e3e1;
border-radius: 15px;
}
.checkboxes-and-radios input[type="checkbox"]+label:after,
.checkboxes-and-radios input[type="radio"]+label:after {
width: 15px;
height: 15px;
right: 15px;
background: #BDBDBD;
border-radius: 50%;
transition: all 200ms ease-out;
}
.checkboxes-and-radios input[type="checkbox"]:checked+label:after,
.checkboxes-and-radios input[type="radio"]:checked+label:after {
right: 0px;
background: #FF9800;
}
<div class="checkboxes-and-radios">
<h1>Radios:</h1>
<input type="radio" name="radio-cats" id="radio-1" value="1" checked>
<label for="radio-1">Radio Label 1</label>
<input type="radio" name="radio-cats" id="radio-2" value="2">
<label for="radio-2">Radio Label 2</label>
<input type="radio" name="radio-cats" id="radio-3" value="3" checked>
<label for="radio-3">Radio Label 3</label>
<h1>Checkboxes:</h1>
<input type="checkbox" name="checkbox-cats1" id="checkbox-1" value="1" checked>
<label for="checkbox-1">Checkbox Label 1</label>
<input type="checkbox" name="checkbox-cats2" id="checkbox-2" value="2">
<label for="checkbox-2">Checkbox Label 2</label>
<input type="checkbox" name="checkbox-cats3" id="checkbox-3" value="3" checked>
<label for="checkbox-3">Checkbox Label 3</label>
</div>
I have styled the following radio buttons so that the actual radio is display:none and the label is an inline-block with a background-color.
I am struggling to find how to show a different background colour on the checked radio button.
Obviously its a simple thing that I am missing:
input[type="radio"] {
display: none;
}
label + checked {
background-color: #ffcb00;
display: inline-block;
width: 8vw;
height: 4vw;
line-height: 4vw;
border-radius: 0.5vw;
}
label {
background-color: #f2f2f2;
display: inline-block;
width: 8vw;
height: 4vw;
line-height: 4vw;
border-radius: 0.5vw;
}
<label>
<input type="radio" name="amount" value="100" checked />
<b>£100</b>
</label>
<label>
<input type="radio" name="amount" value="250" />
<b>£250</b>
</label>
<label>
<input type="radio" name="amount" value="500" />
<b>£500</b>
</label>
<label>
<input type="radio" name="amount" value="1000" />
<b>£1,000</b>
</label>
<label>
<input type="radio" name="amount" value="1500" />
<b>£1,500</b>
</label>
<br>
<br>
<label>
<input type="radio" name="term" value="30" checked />
<b>30 days</b>
</label>
<label>
<input type="radio" name="term" value="60" />
<b>60 days</b>
</label>
<label>
<input type="radio" name="term" value="90" />
<b>90 days</b>
</label>
<label>
<input type="radio" name="term" value="180" />
<b>180 days</b>
</label>
<label>
<input type="radio" name="term" value="360" />
<b>360 days</b>
</label>
Since the label is the parent of the input[type="checkbox"] you can't select it directly in CSS. One option of fixing this would be the following. Add an extra div to the label (.background in my example) and use that to change the background color. Of course there are many more options to fix this, but this is probably the simplest one.
input[type="radio"] {
display: none;
}
.background{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: auto;
height: auto;
background-color: #f2f2f2;
}
input[type="radio"]:checked + .background{
background-color: #ffcb00;
}
label {
position: relative;
display: inline-block;
width: 8vw;
height: 4vw;
line-height: 4vw;
border-radius: 0.5vw;
}
label *{
position: relative;
}
<label>
<input type="radio" name="term" value="30" />
<div class="background"></div>
<b>30 days</b>
</label>
<label>
<input type="radio" name="term" value="30" checked />
<div class="background"></div>
<b>30 days</b>
</label>
You're using the + selector incorrectly. a + b means select any element b immediately following an a, for example:
<a></a>
<b></b>
By changing your HTML so that labels immediately follow radio buttons, we're able to use the pseudo-selector :checked to detect when a radio button is checked and style the label appropriately.
Note that I also added for attributes to your labels and ids to the radio buttons to create an association between the two.
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + label {
background-color: #ffcb00;
display: inline-block;
width: 8vw;
height: 4vw;
line-height: 4vw;
border-radius: 0.5vw;
}
label {
background-color: #f2f2f2;
display: inline-block;
width: 8vw;
height: 4vw;
line-height: 4vw;
border-radius: 0.5vw;
}
<input type="radio" name="amount" id="amount1" value="100" />
<label for="amount1">£100</label>
<input type="radio" name="amount" id="amount2" value="250" />
<label for="amount2">£250</label>