For the CSS gurus out there, this markup outputs a checkbox with a label Value1 to its right, but Value1 is too close to the checkbox.
<dd id="rr-element">
<label for="rr-1">
<input type="checkbox" value="1" id="rr-1" name="rr[]">
Value 1
</label>
</dd>
So I'm trying to create a padding-right effect to the right of the checkbox, but it's not working. The checkbox and label move together. How can I target the checkbox only or its text only so I create a padding gap?
dd label input {
padding-right:100px;
}
Use margin-right. padding is inside the element, and often acts funny with input elements because they are rendered using the OS's native input components, and are a mess to customize in general.
JSFiddle here
No unclickable gap between checkbox and label.
No line wrap disconnection of the checkbox and label.
No spaces added by code indentations.
More readable.
<dd id="rr-element">
<input type="checkbox" value="1" id="rr-1" name="rr[]">
<label for="rr-1">Value 1</label>
</dd>
<style>
#rr-element {
white-space: nowrap;
}
#rr-element label {
padding-left: 0.4em;
}
</style>
Related
I'm having trouble figuring out how to add custom CSS to add spacing between a checkbox and text ( Ship to a different address?). Anytime I add margin or padding the whole element (checkbox + text) is moved. See picture attached?
Thanks for your help!
https://roynattivmd.com/checkout/
Checkbox and text:
You could add some spacing by adding margin-right: [value]; to the specific input. Since you are using elementor, you might do this via inline-styles.
<label for="myInput">
<input id="myInput" type="checkbox" style="margin-right: .5rem;">
Ship to a different address?
</label>
Or via an external stylesheet:
#myInput {
margin-right: .5rem;
}
<label for="myInput">
<input id="myInput" type="checkbox">
Ship to a different address?
</label>
Please try this code,To Spacing between checkbox and text?
dd label input {
margin-right:10px;
}
<dd id="rr-element">
<label for="rr-1">
<input type="checkbox" value="1" id="rr-1" name="rr[]">
Value 1
</label>
</dd>
I hope this code will be useful.
Thank you.
Here is my radio button code in struts tag, the space between radio button and radio button text box is congested how to give space between them
<div class="form-group">
<label class="col-lg-3 control-label">Gender</label>
<div class="col-lg-5">
<div class="btn-group" data-toggle="buttons">
<s:radio name="studentDTO.s_gender" id="gender" list="{'Male','Female'}" />
</div>
</div>
</div>
Many HTML elements have a default margin setting. You can override this and set it to 0. In your case, you want to reset margin-right on the radio button:
<input type="radio" name="beds" value="1" style="margin-right: 0" />1+
You probably want to add it to your stylesheet so that it applies to all radio buttons:
input[type="radio"] {
margin-right: 0;
}
I know this is an old question but to do this in Struts 2 use the cssStyle attribute if you only want it to apply to this group of radio buttons.
<s:radio name="studentDTO.s_gender" id="gender" list="{'Male','Female'}" cssStyle="margin-right:20px" />
Or you can use the cssClass attribute.
<s:radio name="studentDTO.s_gender" id="gender" list="{'Male','Female'}" cssClass="radioMarginRight" />
with
.radioMarginRight{
margin-right: 20px !important;
}
Both of these apply the CSS to the radio button and the label. To keep the margin from applying to the label with the cssClass attribute you could define the following CSS to set the label margin to 0.
label.radioMarginRight{
margin-right: 0px !important;
}
I dont know struts, but looking at this have you tried:
list="{' Male ',' Female '}"
Just putting some spaces between each of the '.
Its what you do in HTML + CSS so might work there
I have the following html.
<td>
<div id="form_comparison" class="field radio_field">
<input type="radio" id="form_comparison_0" name="form[comparison]" value="1"/>
<label for="form_comparison_0">Increased</label>
<input type="radio" id="form_comparison_1" name="form[comparison]" value="2" />
<label for="form_comparison_1">About the same</label>
<input type="radio" id="form_comparison_2" name="form[comparison]" value="3" />
<label for="form_comparison_2">Decreased</label>
</div>
</td>
Using css, how can I position radio buttons vertically, so that labels are displayed just after their respective radio buttons in the same line?
I don't know why you've wrapped this inside a td element, if you are designing a form layout, than ignore tables and use div for designing your form. Coming to your question, you can wrap the labels around input tag and use display: block; for label
#form_comparison label {
display: block;
}
Wrap each input using label like this
<label for="form_comparison_0">
<input type="radio" id="form_comparison_0" name="form[comparison]" value="1"/>
Increased
</label>
Demo
If you don't have any permissions to change the markup, you can use CSS content property with white-space: pre; and that will give you the desired output
label:after {
content: "\A";
white-space: pre;
margin-bottom: 10px;
}
Demo (No Changes In The Markup)
Note: Use #form_comparison label instead of only label as it will
select and apply all label element in your website where
#form_comparison label will only select label elements inside
#form_comparison
Working FIDDLE Demo
Float your input and label, and for second row, clear the float to make a new row:
#form_comparison input {
float: left;
}
#form_comparison label {
float: left;
}
#form_comparison label + input {
clear: both;
}
I have this HTML:
<input type="radio">
<span class="label">
<label id="options_34537_2label" for="options_34537_2">
</label>
</span>
Now I also have some CSS, which hides the radio button itself and puts an image in front of my label.
input[type="radio"] {
display: none;
}
label:before {
background: url("someimage.jpg") no-repeat scroll 0 0 transparent;
}
In IE and FF I can click the image to select the option, in Chrome, clicking does not work at all. Any idea how to solve this issue?
Thanks!
You should put the <input> inside the <label> to make it cliquable:
<label><input type="radio"></label>
And use the background property on your label directly, instead of using the :before pseudo-class. Then add some text or specify a width to show your background.
I'm using ASP.NET radio button list control.
It generates the following HTML.
<table>
<tr>
<td>
<input type="radio"/>
<label >
label 1</label>
</td>
<td>
<input type="radio"
value="False" checked="checked" />
<label >
label 2</label></td>
</tr>
</table>
Everything looks fine so far(at least to the user), labels are aligned with radio buttons.
However when I resize the font to say 10px, the size of the label obviously looks smaller but the side-effect of that is that the label also looks like it is aligned to the bottom of a radio button. I need a label to be alligned to middle of a radio button.
I was able to do this in IE with the following css:
<style type="text/css">
label
{
font-size:10px;
line-height:12px;
vertical-align:middle;
}
</style>
However this doesn't work in Firefox or Chrome
Any suggestions?
Instead of this:
label {
font-size: 10px;
line-height: 12px;
vertical-align: middle;
}
try this:
label, input[type="radio"] {
font-size: 10px;
vertical-align: middle;
}
That attribute selector won't work in IE6 - the most painless method I've found is to add a class of 'radio' to your radio buttons, so the CSS becomes:
label, input.radio{
font-size:10px;
vertical-align:middle;
}
Of course, a table isn't the correct markup for that kind of form - personally I favour a definition list, with labels inside the DT and inputs in the DD. Semantically this is OK in my opinion - you're showing a list of terms (the labels) which the user needs to define (the inputs).
The markup would look like this:
<dl class="formStructure">
<dt class="radio"><label for="option1">Yes</label></dt>
<dd class="radio"><input type="radio" name="option" id="option1" value="yes"/></dd>
<dt class="radio"><label for="option2">No</label></dt>
<dd class="radio"><input type="radio" name="option" id="option2" value="no"/></dd>
</dl>