Menu
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; } 
516
Use margin-right .
If the intent of the user is to bring some more space between check box "box" and its corresponding text, you can use "&npsp;" in the Text content of the checkbox. Hope that helps.
You can use margin left ( ml-x ), margin right ( mr-x ) or padding left ( pl-x ), padding right ( pr-x ) classes of bootstrap-4 or alpha. Where x is any number (1, 2, 3 etc).
The <input type="checkbox"> defines a checkbox. The checkbox is shown as a square box that is ticked (checked) when activated. Checkboxes are used to let a user select one or more options of a limited number of choices. Tip: Always add the <label> tag for best accessibility practices!
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
99
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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
