Clicking on first and second value of radio button selects the first option.
HTML:
#supports(-webkit-appearance: none) or (-moz-appearance: none) {
input[type='radio'],
input[type='checkbox'] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
input[type="radio"] {
top: 0;
left: 0;
height: 1.5vw;
width: 1.5vw;
background-color: #ffff;
border-radius: 50%;
cursor: pointer;
}
<div class="radio-group">
<fieldset>
<legend>Gender</legend>
<label for="gender" id="gender-label">
Male
</label>
<input type="radio" name="gender" id="gender" value="male">
<label for="gender" id="gender-label">
Female
</label>
<input type="radio" name="gender" id="gender" value="female">
</fieldset>
</div>
SO is there any way to to make it so that when user clicks on "Female" the female radio button is checked?
Any help will be much appreciated!
Thank you
<div class="radio-group">
<fieldset>
<legend>Gender</legend>
<label for="male-for"
class="gender-label">
Male
</label>
<input type="radio"
name="gender"
id="male-for"
value="male">
<label for="female-for"
class="gender-label">
Female
</label>
<input type="radio"
name="gender"
id="female-for"
value="female">
</fieldset>
</div>
Your code should be like this.Your ids is not unique that's why it is not working.If you have a design in style then you can change your id="gender-label" to
class="gender-label" .becuase id="gender-label" writing same id is not valid
You need to change your ids. This code will work for you.
<label for="male" id="male-label">
Male
</label>
<input type="radio" name="gender" id="male" value="male">
<label for="female" id="female-label">
Female
</label>
<input type="radio" name="gender" id="female" value="female">
The ids must be uniques, this is how it should work:
#supports(-webkit-appearance: none) or (-moz-appearance: none) {
input[type='radio'],
input[type='checkbox'] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
input[type="radio"] {
top: 0;
left: 0;
height: 1.5vw;
width: 1.5vw;
background-color: #ffff;
border-radius: 50%;
cursor: pointer;
}
<div class="radio-group">
<fieldset>
<legend>Gender</legend>
<label for="genderMale" class="gender-label">
Male
</label>
<input type="radio" name="gender" id="genderMale" value="male">
<label for="genderFemale" class="gender-label">
Female
</label>
<input type="radio" name="gender" id="genderFemale" value="female">
</fieldset>
</div>
Related
I'm working on a challenge and would like to know how I can style a radio input element such that:
the actual radio feature itself is not present,
the element will be such that when selected, its background-color changes to a color of my choosing,
the element can't be deselected after being selected (just like a proper radio button).
I have searched and found this ModernCSS article which didn't provide what I was looking for. I applied what I understood from the article like so:
<label role="radio" class="radio">
<input type="radio" name="radio">
5%
</label>
<label role="radio" class="radio">
<input type="radio" name="radio">
10%
</label>
<label role="radio" class="radio">
<input type="radio" name="radio">
15%
</label>
<label role="radio" class="radio">
<input type="radio" name="radio">
25%
</label>
<label role="radio" class="radio">
<input type="radio" name="radio">
50%
</label>
<label role="textbox">
<input type="text" name="amount" value="40%">
</label>
input[type="radio"] {
display: grid;
place-content: center;
appearance: none;
margin: 10% 0 0;
width: 2rem;
height: 1rem;
align-items: center;
background-color: #fff;
}
input[type="radio"]:checked {
background-color: hsl(172, 67%, 45%);
}
.radio {
grid-template-columns: 1rem auto;
gap: 0.5rem;
background-color: hsl(183, 100%, 15%);
}
As with many other articles I tried, such as this article from Bryntum and this from W3Schools, they show you how to style the radio itself which I don't need, since I'm trying to get rid of it altogether.
I guess you don't actually want the radio buttons to be absent, but you want them not to be seen as you'll still want their clickable qualities.
You can achieve this by setting their opacity to 0.
What you also need is the label element to be influenced by whether its associated input is checked or not. This snippet alters the order so the label comes immediately after the input and the new color (when the radio button is checked) is put onto the label, not onto the radio button.
Note also the use of the 'for' attribute which says that label is associated with that input (via id).
This snippet groups each input/label pair in a div with class choice and groups the lot into a div with class choices to make formatting easier.
.choices {
display: flex;
gap: 10px;
}
input[type="radio"] {
opacity: 0;
width: 2rem;
height: 1em;
background-color: #fff;
position: absolute;
}
input[type="radio"]:checked+label {
background-color: hsl(172, 67%, 45%);
}
.radio {
background-color: hsl(183, 100%, 15%);
color: white;
}
<div class="choices">
<div class="choice">
<input type="radio" name="radio" id="five">
<label role="radio" class="radio" for="five">
5%
</label>
</div>
<div class="choice">
<input type="radio" name="radio" id="ten">
<label role="radio" class="radio" for="ten">
10%
</label>
</div>
<div class="choice">
<input type="radio" name="radio" id="fifteen">
<label role="radio" class="radio" for="fifteen">
15%
</label>
</div>
<div class="choice">
<input type="radio" name="radio" id="twentyfive">
<label role="radio" class="radio" for="twentyfive">
25%
</label>
</div>
<div class="choice">
<input type="radio" name="radio" id="fifty">
<label role="radio" class="radio" for="fifty">
50%
</label>
</div>
<div class="choice">
<input type="text" name="amount" value="40%" id="text">
<label role="textbox" for="text">
</label>
</div>
</div>
Obviously you will want to set the formatting as you want it, and I am not clear what you want to happen with the input of type text as you've given it a different name. I'll put up a comment in order to get clarification.
label{
position: relative;
}
input[type=radio]{
position:absolute;
visibility:hidden;
}
input[type=radio]:checked + div{
background: green;
}
<label role="radio" class="radio">
<input type="radio" name="radio">
<div>5%</div>
</label>
<label role="radio" class="radio">
<input type="radio" name="radio">
<div>10%</div>
</label>
<label role="radio" class="radio">
<input type="radio" name="radio">
<div>15%</div>
</label>
<label role="radio" class="radio">
<input type="radio" name="radio">
<div>20%</div>
</label>
<label role="radio" class="radio">
<input type="radio" name="radio">
<div>50%</div>
</label>
<label role="textbox">
<input type="text" name="amount" value="40%">
</label>
you can go ahead and clean it more and structure it the way you want this is how i do it or using javascript.
you cannot make a radio button deselectable by using only one radio-group. I used multiple radio-group to make a radio button deselectable once selected.
try this:
input[type="radio"] {
appearance: none;
width:100%;
height:100%;
position:absolute;
z-index:999;
}
label{
width:100%;
min-height:100%;
display:flex;
align-items:center;
justify-content:center;
}
input[type="radio"]:checked + label {
background-color: hsl(172, 67%, 45%);
}
div {
height:200px;
}
<div>
<input type="radio" name="radio1"/>
<label role="radio1" class="radio">5%</label>
</div>
<div>
<input type="radio" name="radio2">
<label role="radio2" class="radio">10%</label>
</div>
<div>
<input type="radio" name="radio3">
<label role="radio3" class="radio">15%</label>
</div>
<div>
<input type="radio" name="radio4">
<label role="radio4" class="radio">20%</label>
</div>
<div>
<input type="radio" name="radio5">
<label role="radio5" class="radio">25%</label>
</div>
<div>
<input type="radio" name="radio6">
<label role="radio6" class="radio">50%</label>
</div>
I have few films (for example) on one page. And I have to be able to rate them with pure css stars. The code I have can do it with only first rating, after selecting second - first rating resetting.
You can see it in code below:
#import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
.card input {
display: none;
}
.card label:before {
margin: 5px;
font-size: 1.25em;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}
.card label {
color: #ddd;
float: right;
}
fieldset {
border: none;
margin: 0;
padding: 0;
/*float: left;*/
}
fieldset > input:checked ~ label,
fieldset:not(:checked) > label:hover,
fieldset:not(:checked) > label:hover ~ label {
color: #FFD700;
}
fieldset > input:checked + label:hover,
fieldset > input:checked ~ label:hover,
fieldset > label:hover ~ input:checked ~label,
fieldset > input:checked ~ label:hover ~label {
color: #FFED85;
}
<div class="card">
//...
<div class="card-header">
<fieldset class="stars-1">
<input type="radio" name="stars" id="star-1" value="1">
<label for="star-1"></label>
<input type="radio" name="stars" id="star-2" value="2">
<label for="star-2"></label>
<input type="radio" name="stars" id="star-3" value="3">
<label for="star-3"></label>
<input type="radio" name="stars" id="star-4" value="4">
<label for="star-4"></label>
<input type="radio" name="stars" id="star-5" value="5">
<label for="star-5"></label>
</fieldset>
//...
</div>
</div>
<div class="card">
//...
<div class="card-header">
<fieldset class="stars-2">
<input type="radio" name="stars" id="star-6" value="1">
<label for="star-6"></label>
<input type="radio" name="stars" id="star-7" value="2">
<label for="star-7"></label>
<input type="radio" name="stars" id="star-8" value="3">
<label for="star-8"></label>
<input type="radio" name="stars" id="star-9" value="4">
<label for="star-9"></label>
<input type="radio" name="stars" id="star-10" value="5">
<label for="star-10"></label>
</fieldset>
//...
</div>
</div>
How to make them work separate?
I will appreciate all kinds of support.
Waiting for your help, friends.
You have to use the different name for the second radiobuttons set.
#import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
.card input {
display: none;
}
.card label:before {
margin: 5px;
font-size: 1.25em;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}
.card label {
color: #ddd;
float: right;
}
fieldset {
border: none;
margin: 0;
padding: 0;
/*float: left;*/
}
fieldset > input:checked ~ label,
fieldset:not(:checked) > label:hover,
fieldset:not(:checked) > label:hover ~ label {
color: #FFD700;
}
fieldset > input:checked + label:hover,
fieldset > input:checked ~ label:hover,
fieldset > label:hover ~ input:checked ~label,
fieldset > input:checked ~ label:hover ~label {
color: #FFED85;
}
<div class="card">
//...
<div class="card-header">
<fieldset class="stars-1">
<input type="radio" name="stars" id="star-1" value="1">
<label for="star-1"></label>
<input type="radio" name="stars" id="star-2" value="2">
<label for="star-2"></label>
<input type="radio" name="stars" id="star-3" value="3">
<label for="star-3"></label>
<input type="radio" name="stars" id="star-4" value="4">
<label for="star-4"></label>
<input type="radio" name="stars" id="star-5" value="5">
<label for="star-5"></label>
</fieldset>
//...
</div>
</div>
<div class="card">
//...
<div class="card-header">
<fieldset class="stars-2">
<input type="radio" name="stars_1" id="star-6" value="1">
<label for="star-6"></label>
<input type="radio" name="stars_1" id="star-7" value="2">
<label for="star-7"></label>
<input type="radio" name="stars_1" id="star-8" value="3">
<label for="star-8"></label>
<input type="radio" name="stars_1" id="star-9" value="4">
<label for="star-9"></label>
<input type="radio" name="stars_1" id="star-10" value="5">
<label for="star-10"></label>
</fieldset>
//...
</div>
</div>
I want to make all my radio in #frequent and the checkbox in #player in a straight line like I did in the #gender, but without the need to give every label and input a separate div. How can I do it?
My codepen and a part of my code:
In #gender:
<div id="gender">
<div class="gm">
<label for="male"> Male </label>
<input type="radio" id="male" name="gender" class="rad" >
</div>
<div class="gf">
<label for="female"> Female </label>
<input type="radio" id="female" name="gender" class="rad" >
</div>
And for example,
<div id="frequent">
<legend> How Frequent Do You Listen To Music </legend>
<label for="aday">All day
<input type="radio" id="aday" name="frequent" class="rad">
</label>
<label for="eday">Every day
<input type="radio" id="eday" name="frequent" class="rad">
</label>
<label for="oday">Every other day
<input type="radio" id="oday" name="frequent" class="rad">
</label>
<label for="party">I'm a party person
<input type="radio" id="party" name="frequent" class="rad">
</label>
</div>
You have to give the following styles then it will be exactly like the gender
#frequent label {
width: 50%;
display: flex;
justify-content: space-between;
}
#player label {
display: flex;
justify-content: space-between;
width: 50%;
}
#player input[type="checkbox"] {
margin-right: 0;
}
#player input {
flex: none;
}
you can also check the codepen
Wrap the text in label in a span and then use the following css
HTML
<label for="saxophone"> <span>Saxophone </span>
<input type="checkbox" id="saxophone" class="chk">
</label>
CSS
label > span {
min-width: 150px;
display: inline-block;
}
I would like to get these two lines to stay together. https://prnt.sc/j6c1ks
Desired result: https://prnt.sc/j6c5qb
The problem is that when I manage to get my desired result the first radio button stops working. How would I stop it from breaking?
.form-label {
display: flex;
margin-top: 15px;
}
.label-option {
padding: 20px;
}
<label class="form-label">
<input type="radio" name="authorisation" value="i-do-not"> Speedy fried chicken
<br>
</label>
<label class="label-option"> Would you like it spicy?
<input type="radio" name="option" value="yes"> Yes
<input type="radio" name="option" value="no"> No
</label>
Change display:flex to display:inline-flex:
.form-label {
display: inline-flex;
margin-top: 15px;
}
.label-option {
padding: 20px;
}
<label class="form-label">
<input type="radio" name="authorisation" value="i-do-not"> Speedy fried chicken <br>
</label>
<label class="label-option"> Would you like it spicy?
<input type="radio" name="option" value="yes"> Yes
<input type="radio" name="option" value="no"> No
</label>
.form-label {
display: inline-block;
margin-top: 15px;
}
.label-option {
padding: 20px;
}
<label class="form-label">
<input type="radio" name="authorisation" value="i-do-not"> Speedy fried chicken
</label>
<label class="label-option"> Would you like it spicy?
<input type="radio" name="option" value="yes"> Yes
<input type="radio" name="option" value="no"> No
</label>
The problem is causing by the CSS padding: 20px, after removing this, you won't need that <br /> anymore.
.form-label {
display: flex;
margin-top: 15px;
}
<label class="form-label">
<input type="radio" name="authorisation" value="i-do-not"> Speedy fried chicken
</label>
<label class="label-option"> Would you like it spicy?
<input type="radio" name="option" value="yes"> Yes
<input type="radio" name="option" value="no"> No
</label>
HTML auto maticllay remove spacing if you need to remove spacing keep all in inline elements like span b i or else change the styles of display values should be override with inline
I am getting crazy right now since i try to style my radio buttons for hours now and i cant reach my goal (im completely new to the world of css).
What i want to do is simple:
I want three big radiobuttons underneath each other centered in my div with labels vertically aligned to the buttons. something similar to this:
I have the following html:
<div class="answers">
<label>
<input type="radio" name="answers" value="male" /> All
</label>
<label>
<input type="radio" name="answers" value="female" /> Name
</label>
<label>
<input type="radio" name="answers" value="male" /> Vendor No.
</label>
</div>
And the result is this:
I want much bigger buttons and much bigger text. i want the text to be to the right of the buttom with a little padding. i want all radio buttons to be centered. I tried many things but everything was just looking weird. Pls help me... i am beginning to hate css....
You can use this CSS:
.answers label {
display: block;
font-size: 20px;
line-height: 30px;
margin: 0 auto;
width: 150px;
}
.answers {
width: 100%;
}
.answers input[type="radio"] {
height: 30px;
line-height: 30px;
vertical-align: bottom;
width: 30px;
}
JSFiddle: http://jsfiddle.net/ghorg12110/uqyfbjsb/
The only reason to happen this is to have display: block somewhere in your css to radios:
input[type=radio] {
display: block;
}
<div class="answers">
<label>
<input type="radio" name="answers" value="male" />All
</label>
<label>
<input type="radio" name="answers" value="female" />Name
</label>
<label>
<input type="radio" name="answers" value="male" />Vendor No.
</label>
</div>
You can add display: block to second label using nth-child:
label:nth-child(2) {
display: block;
}
<div class="answers">
<label>
<input type="radio" name="answers" value="male" />All
</label>
<label>
<input type="radio" name="answers" value="female" />Name
</label>
<label>
<input type="radio" name="answers" value="male" />Vendor No.
</label>
</div>
References
nth-child
http://jsfiddle.net/6b888vp8/2/
Add display: block to the label in the answers div, and float left to the inputs. HTML has changed too
.answers label {
display: block
}
.answers input[type="radio"] {
float: left;
}
<div class="answers">
<input type="radio" name="answers" value="male" /><label>All</label>
<input type="radio" name="answers" value="female" /><label>Name</label>
<input type="radio" name="answers" value="male" /><label>Vendor No.</label>
</div>
This one worked for me:
input[type="radio"]{
width: 50px !important;
}
Try it out and check if it works for you as well.