I'm using only HTML and CSS without JavaScript. Initially the code should only show first radio button with it label, if user clicks on it, the second radio button and second label should appear and the first should disappear etc. I have no idea how to achieve this result. I suppose that the problem is in the location of tags. I don't know how to write css styles to do this task. Could you tell me how to solve this problem? The code:
<div>
<label for="radio-1" class="label-1"> <input type="radio" id="radio-1" name="group"> </label>
<label for="radio-2" class="label-2"> <input type="radio" id="radio-2" name="group"> </label>
<label for="radio-3" class="label-3"> <input type="radio" id="radio-3" name="group"> </label>
</div>
My idea is to hide all inputs and labels except ones right after a checked input (use of sibling selector +). To make it work I've added a hidden checked radio before all others.
Based on the question it is not clear what should happen if the last input is checked.
input,
label {
display: none;
}
input:checked + label + input,
input:checked + label + input + label {
display: inline;
}
<div>
<input type="radio" name="group" checked hidden><label hidden></label>
<input type="radio" id="radio-1" name="group"><label for="radio-1" class="label-1">Label 1</label>
<input type="radio" id="radio-2" name="group"><label for="radio-2" class="label-2">Label 2</label>
<input type="radio" id="radio-3" name="group"><label for="radio-3" class="label-3">Label 3</label>
</div>
Related
can somelone explain why i can't unselect or select multiple times my radio button input ? Here is my code:
<div id="grade">
<label id="gradeName">Grade</label>
<input type="radio">
<label for="">5</label>
<input type="radio">
<label for="">6</label>
<input type="radio">
<label for="">7</label>
<input type="radio">
<label for="">8</label>
<input type="radio">
<label for="">9</label>
<input type="radio">
<label for="">10</label>
</div>
For example if i want to unselect the value i can't, can this be fixed in html or i need js for this ?
Radio buttons are designed so that at all times one member of the radio group is selected.
You have not checked one by default, so none start out in the checked state.
You have not given them names so they aren't grouped (each is in a group consisting of just itself).
An an aside, a label is for labelling a single form control. You can't use a label to label an entire radio button group. That is what the fieldset element is for.
<fieldset>
<legend>Radio Example</legend>
<label><input type="radio" name="groupName" value="1" checked> 1</label>
<label><input type="radio" name="groupName" value="2"> 2</label>
<label><input type="radio" name="groupName" value="3"> 3</label>
</fieldset>
If you want each button to have two states, so you can check and uncheck them freely, use checkboxes:
<fieldset>
<legend>Checkbox Example</legend>
<label><input type="checkbox" name="groupName" value="1" checked> 1</label>
<label><input type="checkbox" name="groupName" value="2"> 2</label>
<label><input type="checkbox" name="groupName" value="3"> 3</label>
</fieldset>
Your approach is not right. By reading https://en.wikipedia.org/wiki/Radio_button you can understand that the purpose of the radio button is to choose only one value from a list of items. If you want to have the check/uncheck behavior you should use checkboxes and apply styles to look like radio buttons.
I have the following html code, which contains input radio and label for it, when I turn windows narration (voiceover) on, it highlights only radio button:
But, I want input + label to be highlighted together:
is there any way to achieve this?
Here's my code:
<div>
<input type="radio" id="radio1" name="radio1" checked>
<label for="radio1">
Field label
</label>
</div>
I overcame the issue by changing markup a bit. I added wrapper div:
<div class="radio-wrapper">
<input type="radio" id="radio1" name="radio1" checked>
<label for="radio1">
Field label
</label>
</div>
And made radio button width & height 100% and display: inline-block;
Now it's acting as it should.
So Im a complete beginner and Im stuck on some personal project. Im making forms and I want to have inputs from radio buttons all in the same line, but under the label. I know how to make all elements inline and I know that setting the block property should put them under label. But block element puts all of the inputs on its on line. What I want is all inputs to be on the same line, under lable. I can use tag in HTML, but I want to make it with CSS. Any tips?
<div class="radio" >
<label class="radio" for="age">Your age:</label>
<input type="radio" name="age">0-20
<input type="radio" name="age">20-40
<input type="radio" name="age">40-60
<input type="radio" name="age">60-80
<input type="radio" name="age">80-100
</div>
<div class="radio" >
<label class="radio" for="gender">Your gender</label>
<input type="radio" name="gender">Male
<input type="radio" name="gender">Female
</div>
just put a line break <br />
<div class="radio" >
<label class="radio" for="age">Your age:</label>
<br />
<input type="radio" name="age">0-20
<input type="radio" name="age">20-40
<input type="radio" name="age">40-60
<input type="radio" name="age">60-80
<input type="radio" name="age">80-100
</div>
<div class="radio" >
<label class="radio" for="gender">Your gender</label>
<br />
<input type="radio" name="gender">Male
<input type="radio" name="gender">Female
</div>
Set the label to display: flex; but make sure not to target the radio class or it will also effect the parent div and not work properly.
Instead of setting all of the radio buttons to display: block, setting just the label to display: block will get the effect you want. Block elements will start a new line (if needed) and force the next element to a new line as well. Since you want just the label to be on a new line by itself, setting it to display: block will do the trick.
label.radio {
display: block;
}
<div class="radio">
<label class="radio" for="age">Your age:</label>
<input type="radio" name="age">0-20
<input type="radio" name="age">20-40
<input type="radio" name="age">40-60
<input type="radio" name="age">60-80
<input type="radio" name="age">80-100
</div>
<div class="radio">
<label class="radio" for="gender">Your gender</label>
<input type="radio" name="gender">Male
<input type="radio" name="gender">Female
</div>
The following HTML is generated from a library and cannot be changed in any way, so I need a CSS only solution for my problem. I would like for the radio buttons to appear vertically instead of left to right to each other like so
This is my code.
<span class="buttonset" id="test">
<input type="radio" id="test_1" name="test" value="CC">
<label for="test_1">Option 1</label>
<input type="radio" id="test_2" name="test" value="PL">
<label for="test_2">Option 2</label>
<input type="radio" id="test_3" name="test" value="AL">
<label for="test_3">Option 3</label>
<input type="radio" id="test_4" name="test" value="HL">
<label for="test_4">Option 4</label>
<input type="radio" id="test_5" name="test" value="CL">
<label for="test_5">Option 5</label>
<input type="radio" id="test_6" name="test" value="CL">
<label for="test_6">Option 6</label>
</span>
See also http://jsfiddle.net/QHvhs/
Is there a pure CSS way to get a new line after each input and label element?
you can use css3 pseudo selector :after to insert a line break after every label, making the list vertical.
.buttonset label:after {
content:"\A";
white-space:pre;
}
live demo: Fiddle
This is more semantically better.
You shouldn't have the form elements inside of a SPAN, but rather use DIV.
<span class="buttonset" id="test">
to
<div class="buttonset" id="test">
And the way you should wrap LABEL is
<label for="test_6"><input type="radio" id="test_6" name="test" value="CL"> Option 6</label>
You can then use CSS selector in a better semantic way
.buttonset label {
display: block;
}
Im having the following html for radio buttons,and I have added the css also
<br/><br/>
<input type="radio" id="radio1" name="radios" value="CC" checked>
<label for="radio1">Credit Card</label>
<br><br>
<br/><br/>
<input type="radio" id="radio2" name="radios"value="DB">
<label for="radio2">Debit Card</label>
<br><br>
its css is
/*
Hide radio button (the round disc)
we will use just the label to create pushbutton effect
*/
input[type=radio] {
display:none;
margin:10px;
}
/*
Change the look'n'feel of labels (which are adjacent to radiobuttons).
Add some margin, padding to label
*/
input[type=radio] + label {
display:inline-block;
margin:-2px;
padding: 4px 12px;
background-color: #e7e7e7;
border-color: #ddd;
}
/*
Change background color for label next to checked radio button
to make it look like highlighted button
*/
input[type=radio]:checked + label {
background-image: none;
background-color:#d0d0d0;
}
but the radio buttons doesnt align in one line
here is the jsfidlle http://jsfiddle.net/8ew6g/3/
heres the link http://jsfiddle.net/8ew6g/9/ [solved]
The radio button is below payment mode label,i have applied some css on it,so it wont look like a basic rabio button
Update:
This resource might also be useful, as it uses similar code and the result is inline.
I would suggest following this advice and then wrapping your code with the title in a fieldset. This will allow you to make a legend, so your code will look like this:
<fieldset>
<legend><strong>Payment Mode- Select your payment mode</strong></legend>
<input type="radio" id="radio1" name="radios" value="all" checked>
<label for="radio1">Credit Card</label>
<input type="radio" id="radio2" name="radios" value="false">
<label for="radio2">Debit Card</label>
</fieldset>
You will also want to add this to your CSS:
fieldset {
border: none;
}
You can try this:
<table>
<tr>
<td>
<input type="radio" id="radio1" name="radios" value="CC" checked />
<label for="radio1">Credit<nobr/> Card</label>
</td>
<td>
<input type="radio" id="radio2" name="radios" value="DB">
<label for="radio2">Debit<nobr/> Card</label>
</td>
</tr>
</table>
in order to make sure that the line doesn't break between the two words, which happened when I tried it on your Fiddle.
Your HTML is rather muddled, particularly given the div elements tagged as table and row, so I am not quite sure what to make of it. I am hesitant to recommend a table, particularly in light of this, so maybe you should consider if there is something you could do other than using completely fake radio buttons.
Remove the two <Br /> tags you have between the radio buttons
and wrap the radio buttons with <div> and increase its width to about 180px
like:
<div style="width:180px;">
<input type="radio" id="radio1" name="radios" value="CC" checked>
<label for="radio1">Credit Card</label>
<input type="radio" id="radio2" name="radios"value="DB">
<label for="radio2">Debit Card</label>
</div>`