I have the following HTML and CSS selector chain:
<div className="form-group">
<div class="control-custom-checkbox position-relative">
<input type="checkbox" class="custom-input" id="check1" checked>
<label className="custom-label" htmlFor="check1"></label>
</div>
</div>
.control-custom-checkbox .custom-input:checked~.custom-label::after { }
Next I added another div into the HTML:
<div class="form-group">
<div class="control-custom-checkbox position-relative">
<div class="required">
<input type="checkbox" class="custom-input" id="check1" checked>
</div>
<label class="custom-label" htmlFor="check1"></label>
</div>
</div>
I wrapped the markup in a new <div class="required"> and my styles broke. How should I change my CSS selector?
To keep it work, how it was before another div, you didn't need to change anything in your selector - it still will work and target needed HTML element.
You can check it there: https://codepen.io/anon/pen/BELXqW
The problem was your use of the 'sibling selector' in your CSS selector (~).
This requires that your .custom-label element be a sibling (i.e. next to each other within the DOM tree) of the .custom-input element. When you added the extra div it broke that relation (they were no longer 'next to' each other) so it broke your styling. (The fact that the div had the required class is irrelevant).
There aren't one size fits all fixes for this kind of issue but the safest fix would probably be to adjust the HTML so that they continue to be siblings.
<div class="form-group">
<div class="control-custom-checkbox position-relative">
<div class="required">
<input type="checkbox" class="custom-input" id="check1" checked>
<label class="custom-label" htmlFor="check1"></label>
</div>
</div>
</div>
(Or, as suggested in a comment, just add required onto an existing wrapper.)
If, however, that is not a possibility for some reason. You may be able to get away with removing the sibling selector requirement. E.g.
.control-custom-checkbox .custom-label::after {
/* Your CSS here */
}
Of course that selector may have been put there for a reason and removing it may have unintended side effects, especially if this will affect a large codebase. You will have to judge for yourself if it is safe to remove that sibling selector. I imagine it should be fine if .control-custom-checkbox always contains HTML structured just like your example, but there's no way to be sure without knowing more about the project.
I'm wondering if there is a CSS selector to select any label which refers to an input type checkbox.
<label for="checkbox_1">First checkbox</label>
<input type="checkbox" name="checkbox_1" value="1">
so what works easily:
label[for='checkbox_1'] { /* styles */ }
but then I have to repeat this for every label which refers to a checkbox.
I would like to do something like:
label[type='checkbox'] { /* styles */ }
Any thoughts?
You can use the selector that selects all LABELS with the type attribute starting with the word "checkbox":
label[type^='checkbox']
More information about attribute selectors here: http://www.w3.org/TR/css3-selectors/#attribute-substrings
This is currently not possible with pure CSS, as far as I know. You do have a couple of options for workarounds, though:
The [attribute^='value'] selector
This will work if your labels actually start with the same identifier/word when associated with checkboxes, similarly to the code example you provided.
Example:
HTML
<label for='chckbx'>Foobar</label>
<input type='checkbox' name='chckbx_1' value='1' />
CSS
label[for^='chckbx']{/* styles */}
Writing your HTML in a certain way
This will work if you already have your <label>s and their associated <input />s in their own container, or if you can modify your HTML to be that way. The trick is to select the checkbox element's container via CSS, and then style it's child <label>s.
Example:
HTML
<div class='checkboxContainer'>
<label for='foo'>Foobar</label>
<input type='checkbox' name='foo' value='1' />
</div>
CSS
.checkboxContainer > label{/* styles */}
Using JS
I can write a simple code example to do this with JavaScript(/jQuery), if you want me to.
I have this HTML and CSS
http://jsbin.com/uciya5/3/edit
where the problem is that the radio buttons are treated as individual elements and therefore inherent the properties of class="cellData". Notice how wide the radio buttons are spaced vertically.
<div class="cellData">
<input name="ctype" value="individuel" type="radio" checked/> Individuel <br>
<input name="ctype" value="course" type="radio" /> Course </div>
</div>
Is it possible to control this vertical spacing of the radio buttons, or perhaps wrap a DIV around them to protect them?
Update
Removed template tags.
You could add another class to the div containing radio buttons:
<div class="cellData cellRadios">
with CSS (similar to this):
.cellRadios { line-height: 1 }
See: http://jsbin.com/uciya5/2
Provided that in your CSS you define .cellRadios after .cellData, the line-height from .cellRadios will be the one that's applied.
I'd probably also change .cellRadios to a better name.
If you prefer it, you could instead wrap the radio buttons in an extra div, as you suggested in your question.
<div class="cellData">
<div class="cellRadios">
<input name="ctype" value="individuel" type="radio" <TMPL_VAR IN>/> Individuel
<br>
<input name="ctype" value="course" type="radio" <TMPL_VAR CO>/> Course
</div>
</div>
You could delete this from the CellData stye: line-height:4em
You could also try using a table, it would be a lot simpler.
I have created some simple Javascript to make a checkbox seem re-skinned that hides the checkbox and basically just pulls in a background image through CSS to show the checks/unchecks.
Is this HTML/CSS for hiding the checkbox accessible? I want to be as compliant as possible and am uncertain about the hiding and my label. Currently this is how it looks..
CSS:
.checked:hover, .unchecked:hover
{
background-color: #242424;
}
.checked
{
background-image: url(check.bmp);
color: #ffb500;
}
.unchecked
{
background-image: url(unchecked.bmp);
}
HTML:
<label for="cbAll" class="checked" id="lblAll">
<input id="cbAll" type="checkbox" name="cbAll" checked="checked"/>
ALL </label>
If you're worried about accessibility, I'd say that looking at others' (especially professionally written) code would be the best. jQuery UI is the one that immediately comes to mind. If you look at the code generated by jQuery UI's button widget, part of whose purpose is to serve as a checkbox replacement.
Original HTML:
<input type="checkbox" id="check" /><label for="check">Toggle</label>
Generated HTML:
<input type="checkbox" id="check" class="ui-helper-hidden-accessible" />
<label for="check" aria-pressed="false" class="[redacted]" role="button" aria-disabled="false">
<span class="ui-button-text">Toggle</span>
</label>
Notice the conformation to the WAI-RIA specification, with the correct use of the role attribute to indicate the role taken on by the label element as a button (the original input element is hidden, and thus ignored by screenreaders). You should have a look at the specifications if you want to know how to build things like this in an accessible manner.
Take a look at http://lipidity.com/fancy-form/
You can see how they do it and incorporate it in your own implementation.
Is there a best practice concerning the nesting of label and input HTML elements?
classic way:
<label for="myinput">My Text</label>
<input type="text" id="myinput" />
or
<label for="myinput">My Text
<input type="text" id="myinput" />
</label>
From the W3's HTML4 specification:
The label itself may be positioned before, after or around the
associated control.
<label for="lastname">Last Name</label>
<input type="text" id="lastname" />
or
<input type="text" id="lastname" />
<label for="lastname">Last Name</label>
or
<label>
<input type="text" name="lastname" />
Last Name
</label>
Note that the third technique cannot be used when a table is being used for layout, with the label in one cell and its associated form field in another cell.
Either one is valid. I like to use either the first or second example, as it gives you more style control.
I prefer
<label>
Firstname
<input name="firstname" />
</label>
<label>
Lastname
<input name="lastname" />
</label>
over
<label for="firstname">Firstname</label>
<input name="firstname" id="firstname" />
<label for="lastname">Lastname</label>
<input name="lastname" id="lastname" />
Mainly because it makes the HTML more readable. And I actually think my first example is easier to style with CSS, as CSS works very well with nested elements.
But it's a matter of taste I suppose.
If you need more styling options, add a span tag.
<label>
<span>Firstname</span>
<input name="firstname" />
</label>
<label>
<span>Lastname</span>
<input name="lastname" />
</label>
Code still looks better in my opinion.
Behavior difference: clicking in the space between label and input
If you click on the space between the label and the input it activates the input only if the label contains the input.
This makes sense since in this case the space is just another character of the label.
div {
border: 1px solid black;
}
label {
border: 1px solid black;
padding: 5px;
}
input {
margin-right: 30px;
}
<p>Inside:</p>
<label>
<input type="checkbox" />
Label. Click between me and the checkbox.
</label>
<p>Outside:</p>
<input type="checkbox" id="check" />
<label for="check">Label. Click between me and the checkbox.</label>
Being able to click between label and box means that it is:
easier to click
less clear where things start and end
Bootstrap checkbox v3.3 examples use the input inside: http://getbootstrap.com/css/#forms Might be wise to follow them. But they changed their minds in v4.0 https://getbootstrap.com/docs/4.0/components/forms/#checkboxes-and-radios so I don't know what is wise anymore:
Checkboxes and radios use are built to support HTML-based form validation and provide concise, accessible labels. As such, our <input>s and <label>s are sibling elements as opposed to an <input> within a <label>. This is slightly more verbose as you must specify id and for attributes to relate the <input> and <label>.
UX question that discusses this point in detail: https://ux.stackexchange.com/questions/23552/should-the-space-between-the-checkbox-and-label-be-clickable
If you include the input tag in the label tag, you don't need to use the 'for' attribute.
That said, I don't like to include the input tag in my labels because I think they're separate, not containing, entities.
Personally I like to keep the label outside, like in your second example. That's why the FOR attribute is there. The reason being I'll often apply styles to the label, like a width, to get the form to look nice (shorthand below):
<style>
label {
width: 120px;
margin-right: 10px;
}
</style>
<label for="myinput">My Text</label>
<input type="text" id="myinput" /><br />
<label for="myinput2">My Text2</label>
<input type="text" id="myinput2" />
Makes it so I can avoid tables and all that junk in my forms.
See http://www.w3.org/TR/html401/interact/forms.html#h-17.9 for the W3 recommendations.
They say it can be done either way. They describe the two methods as explicit (using "for" with the element's id) and implicit (embedding the element in the label):
Explicit:
The for attribute associates a label with another control explicitly: the value of the for attribute must be the same as the value of the id attribute of the associated control element.
Implicit:
To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element.
Both are correct, but putting the input inside the label makes it much less flexible when styling with CSS.
First, a <label> is restricted in which elements it can contain. For example, you can only put a <div> between the <input> and the label text, if the <input> is not inside the <label>.
Second, while there are workarounds to make styling easier like wrapping the inner label text with a span, some styles will be in inherited from parent elements, which can make styling more complicated.
3rd party edit
According to my understanding html 5.2 spec for label states that the labels Content model is Phrasing content. This means only tags whose content model is phrasing content <label> are allowed inside </label>.
Content model A normative description of what content must be included
as children and descendants of the element.
Most elements that are categorized as phrasing content can only
contain elements that are themselves categorized as phrasing content,
not any flow content.
A notable 'gotcha' dictates that you should never include more than one input element inside of a <label> element with an explicit "for" attribute, e.g:
<label for="child-input-1">
<input type="radio" id="child-input-1"/>
<span> Associate the following text with the selected radio button: </span>
<input type="text" id="child-input-2"/>
</label>
While this may be tempting for form features in which a custom text value is secondary to a radio button or checkbox, the click-focus functionality of the label element will immediately throw focus to the element whose id is explicitly defined in its 'for' attribute, making it nearly impossible for the user to click into the contained text field to enter a value.
Personally, I try to avoid label elements with input children. It seems semantically improper for a label element to encompass more than the label itself. If you're nesting inputs in labels in order to achieve a certain aesthetic, you should be using CSS instead.
As most people have said, both ways work indeed, but I think only the first one should. Being semantically strict, the label does not "contain" the input. In my opinion, containment (parent/child) relationship in the markup structure should reflect containment in the visual output. i.e., an element surrounding another one in the markup should be drawn around that one in the browser. According to this, the label should be the input's sibling, not it's parent. So option number two is arbitrary and confusing. Everyone that has read the Zen of Python will probably agree (Flat is better than nested, Sparse is better than dense, There should be one-- and preferably only one --obvious way to do it...).
Because of decisions like that from W3C and major browser vendors (allowing "whichever way you prefer to do it", instead of "do it the right way") is that the web is so messed up today and we developers have to deal with tangled and so diverse legacy code.
I usually go with the first two options. I've seen a scenario when the third option was used, when radio choices where embedded in labels and the css contained something like
label input {
vertical-align: bottom;
}
in order to ensure proper vertical alignment for the radios.
I greatly prefer to wrap elements inside my <label> because I don't have to generate the ids.
I am a Javascript developer, and React or Angular are used to generate components that can be reused by me or others. It would be then easy to duplicate an id in the page, leading there to strange behaviours.
Referring to the WHATWG (Writing a form's user interface) it is not wrong to put the input field inside the label. This saves you code because the for attribute from the label is no longer needed.
One thing you need to consider is the interaction of checkbox and radio inputs with javascript.
Using below structure:
<label>
<input onclick="controlCheckbox()" type="checkbox" checked="checkboxState" />
<span>Label text</span>
</label>
When user clicks on "Label text" controlCheckbox() function will be fired once.
But when input tag is clicked the controlCheckbox() function may be fired twice in some older browsers. That's because both input and label tags trigger onclick event attached to checkbox.
Then you may have some bugs in your checkboxState.
I've run into this issue lately on IE11. I'm not sure if modern browsers have troubles with this structure.
There are several advantages of nesting the inputs into a label, especially with radio/checkbox fields,
.unchecked, .checked{display:none;}
label input:not(:checked) ~ .unchecked{display:inline;}
label input:checked ~ .checked{display:inline;}
<label>
<input type="checkbox" value="something" name="my_checkbox"/>
<span class="unchecked">Not Checked</span>
<span class="checked">Is Checked</span>
</label>
As you can see from the demo, nesting the input field first followed by other elements allows,
The text to be clicked to activate the field
The elements following the input field to be dynamically styled according to the status of the field.
In addition, HTML std allows multiple labels to be associated with an input field, however this will confuse screen readers and one way to get round this is to nest the input field and other elements within a single label element.