I want to make block for radio
This is my code.
<label> Rating
<input type="radio">great
<input type="radio">wonderful
</label>
But it does not work correctly.
label{
display: block;
}
<p> Rating</p>
<label for="radio1"><input type="radio" id="radio1" name="radiogroup1">great</label>
<label for="radio2"><input type="radio" id="radio2" name="radiogroup1">wonderful</label>
<div style="display:flex; width: 120px;">
<p style="flex:1">Rating</p>
<div style="flex:1">
<input type="radio">Good<br>
<input type="radio">Great
</div>
</div>
Do you mean something like this? You could also use a table to get the same effect.
Only with html:
<label> Rating: </label>
<p>
<input type="radio" name="rate" id="great">
<label for="great">great</label>
</p>
<p>
<input type="radio" name="rate" id="wonderful">
<label for="wonderful">wonderful</label>
</p>
Try this simple solution to display as list.
label li {
list-style:none;
}
<label> Rating
<li><input type="radio" name="group1">great</li>
<li><input type="radio" name="group1">wonderful </li>
</label>
You might not have do use any css here, you can create the structure using block elements.
Here you are trying to align a inline element in a block so you can use p, div or any other block element.
/* outline focus */
label:focus, input:focus{
outline: dotted 2px red;
}
/* No CSS to align the below elements */
<label for="rating"> Rating</label>
<p><label for="great">great</label><input type="radio" name="rating" id="great"></p>
<p><label for="wonderful">wonderful</label><input type="radio" name="rating" id="wonderful"></p>
Related
I want to make it look like it looks at the picture.
I can't put label and radio "circle" in same line.
I was trying to add input class and set float: left but it makes a big space between those two.
<fieldset>
<legend>Choose car rental</legend>
<label>mini<input type="radio" name="carclass" value="mini" value="mini"></label>
<label>economy<input type="radio" name="carclass" value="economy"></label>
<label>compact<input type="radio" name="carclass" value="compact"></label>
<label>SUV<input type="radio" name="carclass" value="suv"></label>
<label>VAN<input type="radio" name="carclass" value="van"></label>
</fieldset>
<fieldset>
<legend>Choose optional equupment</legend>
<label>child seat<input type="checkbox" name="eq" value="seat"></label>
<label>GPS<input type="checkbox" name="eq" value="GPS"></label>
<label>DVD player<input type="checkbox" name="eq" value="dvd"></label>
</fieldset>
Not nescesary to use a label tag for radio fields. Try adding your radio fields like this:
<fieldset>
<legend>Choose car rental</legend>
<input type="radio" name="carclass" value="mini"> Mini<br>
<input type="radio" name="carclass" value="economy" checked> Economy<br>
<input type="radio" name="carclass" value="compact"> Compact<br>
<input type="radio" name="carclass" value="suv"> Suv<br>
<input type="radio" name="carclass" value="van"> Van
</fieldset>
<fieldset>
<legend>Choose optional equipment</legend>
<input type="radio" name="eq" value="seat" checked> Seat<br>
<input type="radio" name="eq" value="gps"> GPS<br>
<input type="radio" name="eq" value="dvd"> dvd
</fieldset>
If you need a clickable label to select the radio field, then you would need labels with for attributes and add id attributes to the input fields. Like this:
<fieldset>
<legend>Choose car rental</legend>
<input type="radio" name="carclass" id="mini" value="mini">
<label for="mini">Mini</label><br>
<input type="radio" name="carclass" id="economy" value="economy" checked>
<label for="economy">Economy</label><br>
<input type="radio" name="carclass" id="compact" value="compact">
<label for="compact">Compact</label><br>
<input type="radio" name="carclass" id="suv" value="suv">
<label for="suv">Suv</label><br>
<input type="radio" name="carclass" id="van" value="van">
<label for="van">Van</label>
</fieldset>
<fieldset>
<legend>Choose optional equipment</legend>
<input type="radio" name="eq" id="seat" value="seat" checked>
<label for="seat">Seat</label><br>
<input type="radio" name="eq" id="gps" value="gps">
<label for="gps">GPS</label><br>
<input type="radio" name="eq" id="dvd" value="dvd">
<label for="dvd">dvd</label>
</fieldset>
You need to put the <input> before the <label>, like so:
<label>This is the label</label>
<input type="radio" name="radio" value="radio">
If you want the radio to be selected when clicking on the label you have to add an ID to the input and reference that ID by using the for attribute. Like so:
<label for="radio1">This is the label</label>
<input type="radio" name="radio" id="radio1" value="radio">
If you want the label and radio on their own line, add a <br /> after the <input>.
You can add css like this
fieldset label {
display: block;
}
HTML
Place the <input> tag before the <label> tag and add a <br> after <label>
<input> <label></label> <br>
CSS
The essential styles are:
input, label {height: [line-height]; line-height: [height]; vertical-align: middle}
The rest of the CSS is either suggested or required. Required styles meaning to apply in the current layout, so it may or may not work as well under different circumstances. See comments in the demo.
BTW when a <form> is submitted the values of each form control (ex. <input>, <textarea>, <select>, etc) with a [name] attribute is collected then sent to the server. A radio button group commonly share a [name] because of its singular nature (normally only one radio can be selected), but if other types of form controls share a [name] then the values will be collected into an array with said [name]. Nothing wrong with that in of itself but just FYI since the checkboxes share the same [name=eq].
/* Suggested */
:root {
font: 400 16px/1.3 Verdana;
}
html,
body {
width: 100%;
height: 100%;
}
body {
overflow-x: hidden;
line-height: 1.3rem;
}
form {
display: flex;
flex-flow: row wrap;
}
fieldset {
width: fit-content;
}
/* Required */
input,
label {
display: inline-block;
font: inherit;
height: 1.3rem; /* Essential */
line-height: 1.3rem; /* Essential */
vertical-align: middle; /* Essential */
}
input {
width: 1rem;
}
[type=radio] {
vertical-align: bottom;
}
<form>
<fieldset>
<legend>Choose car rental</legend>
<input type="radio" name="carclass" value="mini">
<label>mini</label><br>
<input type="radio" name="carclass" value="economy">
<label>economy</label><br>
<input type="radio" name="carclass" value="compact">
<label>compact</label><br>
<input type="radio" name="carclass" value="suv">
<label>SUV</label><br>
<input type="radio" name="carclass" value="van">
<label>VAN</label><br>
</fieldset>
<fieldset>
<legend>Choose optional equipment</legend>
<input type="checkbox" name="eq" value="seat">
<label>child seat</label><br>
<input type="checkbox" name="eq" value="GPS">
<label>GPS</label><br>
<input type="checkbox" name="eq" value="dvd">
<label>DVD player</label><br>
</fieldset>
</form>
your just putting the text before the input dont use <br>
now you can use if you want them to wrap use on fieldset display:inline-flex;without targeting label or display:inline-block and you set the label to display:block
label{display:block;}
<fieldset>
<legend>Choose car rental</legend>
<label><input type="radio" name="carclass" value="mini">mini</label>
<label><input type="radio" name="carclass" value="economy">economy</label>
<label><input type="radio" name="carclass" value="compact">compact</label>
<label><input type="radio" name="carclass" value="suv">SUV</label>
<label><input type="radio" name="carclass" value="van">VAN</label>
</fieldset>
<fieldset>
<legend>Choose optional equupment</legend>
<label><input type="checkbox" name="eq" value="seat">child seat</label>
<label><input type="checkbox" name="eq" value="GPS">GPS</label>
<label><input type="checkbox" name="eq" value="dvd">DVD player</label>
</fieldset>
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>
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.
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;
}
I'm building a criteria form using Bootstrap. Some of the form fields include checkbox or radio options, so I'd like to employ fieldset and the attendant legend to associate the options with their category.
Stop me if you've heard this before, but I'm having problems styling the form for IE7. Specifically:
The legend seems to cause a line-break, so
I can't seem to get the radio buttons (or checkboxes) to "stay" in the right column.
This image demonstrates the "bad" layout on the first line (in red boxes), and the layout I'm trying to achieve on the second line (in green boxes).
Let's go to the HTML:
<form name="form_search" id="form_search" action="acrq_results.html" method="post" class="form-horizontal">
<fieldset>
<legend>Regular legend not classed `.control-label`</legend>
<div id="div_search_type" class="control-group">
<fieldset>
<legend class="control-label">With fieldset and legend.control-label</legend>
<div class="controls">
<label for="p_search_type1" class="radio inline span2"><input type="radio" name="p_search_type" id="p_search_type1" value="both" checked="checked" />Option 1</label>
<label for="p_search_type2" class="radio inline span2"><input type="radio" name="p_search_type" id="p_search_type2" value="passport_only"/>Option 2</label>
<label for="p_search_type3" class="radio inline span2"><input type="radio" name="p_search_type" id="p_search_type3" value="crba_only" />Option 3</label>
</div>
</fieldset>
</div>
<div id="div_other_reason" class="control-group">
<label class="control-label">no fieldset or legend</label>
<div class="controls">
<label for="p_search_type1" class="radio inline span2"><input type="radio" name="p_search_type" id="p_search_type1" value="both" checked="checked" />Option 1</label>
<label for="p_search_type2" class="radio inline span2"><input type="radio" name="p_search_type" id="p_search_type2" value="passport_only"/>Option 2</label>
<label for="p_search_type3" class="radio inline span2"><input type="radio" name="p_search_type" id="p_search_type3" value="crba_only" />Option 3</label>
</div>
</div>
</fieldset>
</form>
I've added these CSS rules to complement what comes with Bootstrap (but it's not doing the trick):
legend.control-label, legend.control-label > span {
border-bottom: 0;
color: #000;
cursor: pointer;
display:inline-block;
float:left;
*display:inline;
*float:none;
font-size: 14px;
font-weight: normal;
line-height: 20px;
margin-bottom: 5px;
}
I have packaged all of this together in a JSFiddle at http://jsfiddle.net/jhfrench/zTAHh/. Again, this issue is for IE7; it looks fine in Chrome.
Since you have tried
*display:inline;
*float:none;
Try positioning it to absolute.
HTML
<div id="div_search_type" class="control-group">
<fieldset class="group">
<legend class="control-label">With fieldset and legend.control-label</legend>
<div class="controls">
<label for="p_search_type1" class="radio inline span2"><input type="radio" name="p_search_type" id="p_search_type1" value="both" checked="checked" />Option 1</label>
<label for="p_search_type2" class="radio inline span2"><input type="radio" name="p_search_type" id="p_search_type2" value="passport_only"/>Option 2</label>
<label for="p_search_type3" class="radio inline span2"><input type="radio" name="p_search_type" id="p_search_type3" value="crba_only" />Option 3</label>
</div>
</fieldset>
</div>
CSS
legend.control-label {
position:absolute;
left:0;
}
fieldset.group{
padding-left: 200px; /*width of legend[160px] + space of 40px*/
position: relative;
}