I tried this solution but it didn't work, any advice how it can be achieved?
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-row">
<div class="col-4">
<p>Signing on behalf of</p>
<label class="radio-inline" style="">
<input type="radio" name="optradio" checked="true" style="padding-left:15px;">A Company
</label>
<label class="radio-inline" style="padding-left:15px;">
<input type="radio" name="optradio" style="padding-left:15px;">An Individual
</label>
</div>
</div>
JSfiddle
input tag don't have closing tag, second wrap label inside span
and give it a margin
label span{
display:inline-block;
margin-left: 10px;
}
<div class="form-row">
<div class="col-4">
<p>Signing on behalf of</p>
<label class="radio-inline" style="">
<input type="radio" name="optradio" checked="true" style="padding-left:15px;"><span>A Company</span>
</label>
<label class="radio-inline" style="padding-left:15px;">
<input type="radio" name="optradio" style="padding-left:15px;"><span>An Individual</span>
</label>
</div>
</div>
Edit: You can just separate the input and label and link them using an 'id' on the input and a 'for' attribute on the label. Then you can style your label to add the spacing.
<input id="company" type="radio" name="optradio" checked="true" /><span ></span><label for="company" class="radio-inline" style="padding-left:15px;"> A Company
</label>
Insted padding-left use margin-right. And don't use closing </input> tag, it is auto closing like <input />
.radio-class {
margin-right: 15px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-row">
<div class="col-4">
<p>Signing on behalf of</p>
<label class="radio-inline" style="">
<input type="radio" name="optradio" checked="true" class="radio-class" />A Company
</label>
<label class="radio-inline" style="padding-left:15px;">
<input type="radio" name="optradio" class="radio-class" />An Individual
</label>
</div>
</div>
Taking off from Mr Belugin's idea above. This bit of css will add a right margin to all radio buttons. This solution required no additional class added to the many radio buttons in my form.
It basically adds a 4px right margin to all radio buttons.
input[type=radio] { margin-right:4px; }
Related
I have this code with a 5 star rating(radio button) to be used in two different questions.
The problem is: the ratings of each question are working as one. I mean, I select something in the first question, but when I do a selection in the second question it changes the selection in the first one.
This problem happens when I add the CSS code. Without the CSS it works fine.
What is wrong in the CSS?
.estrelas input[type=radio] {
display: none;
}
.estrelas label i.fa:before {
content: '\f005';
color: #FC0;
font-size: 40px;
}
.estrelas input[type=radio]:checked~label i.fa:before {
color: #CCC;
}
.estrelas {
margin-left: 10px;
margin-top: 10px;
}
<div class="form-group has-feedback">
<div class="col-xs-12">
<label for="co_pergunta_avaliacao" class="control-label">ASPECTOS FORMAIS/GRAMATICAIS</label>
</div>
<div class="col-xs-8 estrelas" id="pergunta_1">
<label for="cm_star-1"><i class="fa"></i></label>
<input type="radio" id="cm_star-1" name="pergunta_1" value=1_1 />
<label for="cm_star-2"><i class="fa"></i></label>
<input type="radio" id="cm_star-2" name="pergunta_1" value=1_2 />
<label for="cm_star-3"><i class="fa"></i></label>
<input type="radio" id="cm_star-3" name="pergunta_1" value=1_3 />
<label for="cm_star-4"><i class="fa"></i></label>
<input type="radio" id="cm_star-4" name="pergunta_1" value=1_4 />
<label for="cm_star-5"><i class="fa"></i></label>
<input type="radio" id="cm_star-5" name="pergunta_1" value=1_5 />
</div>
</div>
<div class="form-group has-feedback">
<div class="col-xs-12">
<label for="co_pergunta_avaliacao" class="control-label">CONTEÚDO/ARGUMENTAÇÃO</label>
</div>
<div class="col-xs-8 estrelas" id="pergunta_2">
<label for="cm_star-1"><i class="fa"></i></label>
<input type="radio" id="cm_star-1" name="pergunta_2" value=2_1 />
<label for="cm_star-2"><i class="fa"></i></label>
<input type="radio" id="cm_star-2" name="pergunta_2" value=2_2 />
<label for="cm_star-3"><i class="fa"></i></label>
<input type="radio" id="cm_star-3" name="pergunta_2" value=2_3 />
<label for="cm_star-4"><i class="fa"></i></label>
<input type="radio" id="cm_star-4" name="pergunta_2" value=2_4 />
<label for="cm_star-5"><i class="fa"></i></label>
<input type="radio" id="cm_star-5" name="pergunta_2" value=2_5 />
</div>
</div>
Radio button IDs must be unique. Here, IDs cm_star-1 ... cm_star-5 are used for 2 radio buttons each, which causes the behavior.
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>
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 have two radio buttons, No and Yes. By default no is checked. I have css that styles the checked elements. But by default the styles only work if you physically check it. I want to style it right of page load without have to select it. Currently I am stumped. Thanks for your help
HTML
<div class="split">
<input id="contact-no" type="radio" name="contact" value="No" checked="checked">
<label for="contact-no">No</label>
</div>
<div class="split">
<input id="contact-yes" type="radio" name="contact" value="Yes">
<label for="contact-yes">Yes</label>
</div>
CSS
.am-form input[type="radio"] + label:hover, .am-form input[type="radio"]:checked + label{background: rgb(239,58,65);}
What it looks like on page load:
What It should Look like on page load and after you select it:
I had multiple hidden section with the same name/id, so I juts had to customize each one.
<div class="split">
<input id="ns-contact-no" type="radio" name="ns_contact" value="No" checked="checked">
<label for="ns-contact-no">No</label>
</div>
<div class="split">
<input id="fs-contact-yes" type="radio" name="ns_contact" value="Yes">
<label for="fs-contact-yes">Yes</label>
</div>
further down and hidden:
<div class="split">
<input id="bs-contact-no" type="radio" name="bs_contact" value="No" checked="checked">
<label for="bs-contact-no">No</label>
</div>
<div class="split">
<input id="bs-contact-yes" type="radio" name="bs_contact" value="Yes">
<label for="bs-contact-yes">Yes</label>
</div>
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;
}