I have a big problem.
My task is to design a custom form on a custom page in a CMS (JTL). I am using a plugin to create this form. The problem is that the labels are in front of the checkboxes. This results in a very bad layout. I cannot change the position of the label in the HTML code and therefore have to use CSS since I am not allowed to use JS.
This is basically the HTML:
<li>Question<br/>
<label for="option1">Option 1</label><input id="option1" type="checkbox" /><br/>
<label for="option2">Option 2</label><input id="option2" type="checkbox" /><br/>
<label for="option3">Option 3</label><input id="option3" type="checkbox" /></li>
It doesn't really matter if the CSS gets huge since my task is to make it look good at any cost (just no rearranging HTML and not using JS).
You can use the float property on the input.
Since the checkbox is coming after the label, the float will affect the next element, so don't forget to clear the floating using clear, otherwise it will messup your visual!
input[type="checkbox"] {
float: left;
clear: both;
}
<label for="option1">Option 1</label><input id="option1" type="checkbox" /><br/>
<label for="option2">Option 2</label><input id="option2" type="checkbox" /><br/>
<label for="option3">Option 3</label><input id="option3" type="checkbox" />
You can float the <label>s right and then add a fixed width to each <li>
http://jsfiddle.net/ctkhyoy7/
You can add a float: left property to the checkboxes.
CSS:
input {
float: left;
}
Jsfiddle: http://jsfiddle.net/yzeLpgj0/
You can change it like this in your css http://jsfiddle.net/2ynyb4aL/
label{
position:absolute;
margin-left:20px;
}
This should help you alot : http://www.webcredible.com/blog-reports/css/css-forms.shtml?
OR try use :
<style type="text/css">
label {
display: block;
padding-left: 15px;
text-indent: -15px;
}
input {
width: 13px;
height: 13px;
padding: 0;
margin:0;
vertical-align: bottom;
position: relative;
top: -1px;
*overflow: hidden;
}
</style>
Related
I am trying to edit the way radio buttons appear in CSS and trying to do it with the label encompassing the button and not using the label for function.
In other words, I don't want to use this:
<input type="radio" name="rb" id="rb2" />
<label for="rb2">Hello</label>
I want to use this:
<label><input type="radio" name="rb" />Hello</label>
The reason for this is that the HTML is dynamically generated and I cannot create an id or other field in the input. When I add the css to modify the button/text it doesn't work because it requires the label to be on the text only and "for" to be used. Here is the CSS:
.container{
display: block;
position: relative;
margin: 40px auto;
height: auto;
width: 500px;
padding: 20px;
font-family: 'Lato', sans-serif;
font-size:18px;
border:2px
solid #ccc;
overflow-y: scroll;
resize: both;
}
.container input[type=radio]:checked ~ .check {
border: 5px solid #0DFF92;
}
.container input[type=radio]:checked ~ .check::before{
background: #0DFF92;
}
.container input[type=radio]:checked ~ label{
color: #0DFF92;
}
It works if I put the
<div class="container>
<input type="radio" name="rb" value="Hello" id=rb2"/>
<label for="rb2">Hello</label>
<input type="radio" name="rb" value="Goodbye" id="rb3"/>
<label for="rb3">Goodbye</label>
</div>
But not with
<div class="container>
<label> <input type="radio" name="rb" value="Hello">Hello</label>
<label><input type="radio" name="rb" value="Goodbye">Goodbye</label>
</div>
Any suggestions? Thank you so much!
You would have to use javascript. You can't navigate back up the dom tree in css, so since you want the input to be inside the label and the css to affect the label based on the the input, you'd have to use js to detect the change and apply the styling to its parent.
I can't get the form text to be styled. The text is left all the way at the top, while my radio inputs are correctly styled to be 100px from the top. Does it require a special attribute tag? I don't believe the documentation made note of that, if that's the case. Anyway, my code is:
input[type='radio'] {
position: relative;
top: 100px;
margin-left: 70px;
font-family: Arial;
}
<form>
<input type='radio' name='level' value='choice1' checked='checked'>Choice 1</input>
<input type='radio' name='level' value='choice2'>Choice 2</input>
</form>
Make labels out of the text as follows:
.radio-label {
position: relative;
top: 100px;
margin-left: 70px;
font-family: Arial;
}
<form>
<label class="radio-label">Choice 1 <input type='radio' name='level' value='choice1' checked='checked'></label>
<label class="radio-label">Choice 2 <input type='radio' name='level' value='choice2'></label>
</form>
Based on the info of the W3 about the input type radio you have a few mistakes:
This doesn't allow any content
The attribute val isn't allowed must be value
No need for the closing tag of the input
And with the example of the wiki, you need to restructure your code like this:
label {
position: relative;
top: 100px;
margin-left: 70px;
font-family: Arial;
}
<form>
<label><input type='radio' name='level' value='choice1' checked='checked'/>Choice 1</label>
<label><input type='radio' name='level' value='choice2'/>Choice 2</label>
</form>
Note: Use the validator of W3 to avoid structural mistakes
I am trying to customize the look of my checkboxes using font-awesome and to have all the text of the labels correctly indented. I have customized the look of the checkboxes which makes the usual approaches to indent the text not working as I am hiding the actual checkbox (see the CSS below).
Currently, I obtain the following (left) while I would like the one on the right:
I used the following code (see the JSFiddle):
CSS
Inspired by this simple CSS checkboxes, I use the following to format my checkboxes with font-awesome:
input[type=checkbox] {
display:none;
}
input[type=checkbox] + label:before {
font-family: FontAwesome;
display: inline-block;
content: "\f096";
letter-spacing: 10px;
cursor: pointer;
}
input[type=checkbox]:checked + label:before {
content: "\f046";
}
input[type=checkbox]:checked + label:before {
letter-spacing: 8px;
}
HTML
<input type="checkbox" id="box1" checked="">
<label for="box1">Item 1: some long text...</label>
<br>
<input type="checkbox" id="box2" checked="">
<label for="box2">Item 2: some long text...</label>
<br>
<input type="checkbox" id="box3">
<label for="box3">Item 3: some long text...</label>
I have tried to modify the margin-left and text-indent attributes of the label and label:before selectors but without any success.
Any idea how I could have the correct indent while using the nice font-awesome icons?
Thank you very much for your help!
Add this style (tested both on Chrome and Firefox)
label {
display: block;
padding-left: 1.5em;
text-indent: -.7em;
}
http://jsfiddle.net/tkt4zsmc/2/
Final result:
After trying fcalderan's suggestion and not being able to get the values for padding-left and text-indent right for different browsers, I switched to a flex box. It is pretty green nowadays.
If you put the input/label pairs in divs as it is recommended by Mozilla, you can style them this way.
fieldset {
width: 13ch;
}
fieldset > div {
display: flex;
}
fieldset > div > * {
align-self: baseline;
}
fieldset > div > input[type=checkbox] {
margin: 0 0.5ch 0 0;
width: 1em;
height: 1em;
}
<fieldset>
<legend>Sichtbarkeit</legend>
<div>
<input id="c1" checked="" type="checkbox">
<label for="c1">Minuten</label>
</div>
<div>
<input id="c2" checked="" type="checkbox">
<label for="c2">Nur Minuten, die Vielfache von 5 sind</label>
</div>
<div>
<input id="c3" checked="" type="checkbox">
<label for="c3">Stunden</label>
</div>
<div>
<input id="c4" checked="" type="checkbox">
<label for="c4">Nur 12 Stunden</label>
</div>
</fieldset>
Based on the answer by Fabrizio Calderan, I used the following modifications to the CSS:
label{
display: inline-block;
margin-left: 20px;
}
label:before{
margin-left: -23px;
}
The advantage is that it does not modify the spacing between the items. You can see the final results in JSFiddle.
I have used label for with both input textboxes:
<label for="Username">Username</label>
<input id="Username" type="text" value="">
and checkboxes/radioboxes
<label for="Live">System is Live</label>
<input id="Live" name="Live" type="checkbox" value="false">
The trouble I have is how do I specify different css for the labels for different input types.
If I do a generic label css:
label {
color: #00a8c3;
line-height: 20px;
padding: 2px;
display: block;
float: left;
width: 160px;
}
I find I either end up with unaligned checkboxes or badly positioned textboxes.
You could add classes to the labels. For example:
<label for="Username" class="textbox-label">Username</label>
<input id="Username" type="text" value="">
<label for="Live" class="checkbox-label">System is Live</label>
<input id="Live" name="Live" type="checkbox" value="false">
Then use the class values in CSS:
label.textbox-label {
/*some styles here*/
}
label.checkbox-label {
/*some styles here*/
}
Alternatively, if you had the labels after the inputs, you could select like this:
input[type="text"] + label {
/*some styles here*/
}
input[type="checkbox"] + label {
/*some styles here*/
}
You could write css selector like this will work:
label[for=Username]{ /* ...definitions here... / }
label[for=Live] { / ...definitions here... */ }
You could write your css selector like this:
label[for=Username]
label[for=Live]
You may also have a look at this thread:
CSS Selector for selecting an element that comes BEFORE another element?
Here is what my work is so far:
http://jsfiddle.net/2RCBQ/
<div id="main">
<form>
<label>First Name:<input type="text" id="firstname"></label><br/>
<label>Last Name:<input type="text" id="lastname"></label><br>
<label>E-Mail:<input type="text" id="email"></label><br/>
<label>Phone:<input type="text" id="phone"></label><br/>
</form>
</div>
CSS
#main {
width:300px;
}
#main input {
float:right;
display:inline;
}
#main label {
color: #2D2D2D;
font-size: 15px;
width:250px;
display: block;
}
Currently, the label (on the left) is kind of towards to top of the input field (on the right). I want to vertically align them so the label since in the middle of the input field.
I've tried vertical-align and it does not work. Please help me try to figure out the problem. Thanks.
I feel nesting <span> adds a lot of unnecessary markup.
display: inline-block lets the <label> and <input> sit next to each other just like with float: right but without breaking document flow. Plus it's much more flexible and allows more control over alignment if you (or the user's screen reader) want to change the font-size.
Edit: jsfiddle
label, input {
display: inline-block;
vertical-align: baseline;
width: 125px;
}
label {
color: #2D2D2D;
font-size: 15px;
}
form, input {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
form {
width: 300px;
}
<form>
<label for="firstname">First Name:</label><input type="text" id="firstname">
<label for="lastname">Last Name:</label><input type="text" id="lastname">
<label for="email">E-Mail:</label><input type="text" id="email">
<label for="phone">Phone:</label><input type="text" id="phone">
</form>
You can use flexbox css to vertical align.
Just wrap the parent element display-flex.
.display-flex {
display: flex;
align-items: center;
}
html:
I add span in your label so we can add style specific for the text label:
<div id="main">
<form>
<label><span>First Name:</span><input type="text" id="firstname"></label><br/>
<label><span>Last Name:</span><input type="text" id="lastname"></label><br>
<label><span>E-Mail:</span><input type="text" id="email"></label><br/>
<label><span>Phone:</span><input type="text" id="phone"></label><br/>
</form>
</div>
css:
#main label span {
position:relative;
top:2px;
}
demo
You can enclose the <label> elements in a span and set the span's vertical-align to middle
HTML
<div id="main">
<form> <span><label>First Name:<input type="text" id="firstname" /></label></span>
<br/> <span><label>Last Name:<input type="text" id="lastname" /></label></span>
<br/> <span><label>E-Mail:<input type="text" id="email" /></label></span>
<br/> <span><label>Phone:<input type="text" id="phone" /></label></span>
<br/>
</form>
</div>
CSS
#main {
width:300px;
}
#main input {
float:right;
display:inline;
}
#main label {
color: #2D2D2D;
font-size: 15px;
}
#main span {
display: table-cell;
vertical-align: middle;
width:250px;
}
http://jsfiddle.net/2RCBQ/2/
I think that the following is the only method that works for all input types.
label { display: flex; align-items: center; }
input { margin: 0; padding: 0; }
<label><input type="checkbox"> HTML</label>
<label><input type="radio"> JS</label>
<label>CSS <input type="text"></label>
<label>Framework
<select><option selected>none</option></select>
</label>
I put because it seems to be the simplest way to align different input types; however, margins work just fine.
I know this is a super-old post, but I feel that the answers mix things and come to different solutions.
The original author asked about the label text's vertical alignment of implicit labelling; some answers solve this by using explicit labelling. I think this was not asked for.
See the difference between implicit vs. explicit labelling here: https://css-tricks.com/html-inputs-and-labels-a-love-story/#aa-how-to-pair-a-label-and-an-input
As I'm confronted every now and then I'd like to share my solution for implicit labelling.
The problem at explicit labelling is easily solved, since then you have your label as its own box and can apply any CSS of your liking to it rather independent of the associated input field.
However, at implicit labelling, the situation is different, since then the label text and the input are not separated items in this box. I think you do not have any other choice but to add a span around the text if you want to address the text independently from the input (note: you may not use a div here. Inside a label, only phrasing content elements are allowed: https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#phrasing_content and div is not.)
This is what https://stackoverflow.com/a/15193954/8754067 stated above correctly, but the answer is lacking the dichotomy between implicit and explicit labelling. And has been not up-voted enough (at least in my personal view). Therefore, I feel the need to stress this again here.
form {
width: 400px;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
form label {
display: grid;
grid-template-columns: 10rem 1fr;
gap: 0.5rem;
min-width: 100%;
font-size: 15px;
/* increase height to see effect. */
height: 3rem;
}
form label span {
margin-block: auto;
}
<form>
<label><span>First Name (middle):</span><input type="text" id="firstname"></label>
<label><span>Last Name (middle):</span><input type="text" id="lastname"></label>
<label>E-Mail (default):<input type="text" id="email"></label>
<label>Phone (default):<input type="text" id="phone"></label>
</form>