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.
Related
I'm trying to understand a problem that has been bugging me for a while, now.
I am wondering why checkboxes would be targeted by the pseudo element :read-only, even when not having the disabled attribute.
See the snippet below :
input:read-write + label {
background-color: green;
}
input:read-only + label {
background-color: red;
}
<!-- an active ( not disabled ) checkbox -->
<input type="checkbox" id="checkbox" />
<label for="checkbox">the checkbox</label>
<br />
<br />
<!-- a disabled text -->
<input type="text" disabled id="text"/>
<label for="text">the text</label>
<br />
<br />
<!-- an active ( not disabled ) text -->
<input type="text" id="text-active"/>
<label for="text-active">another text</label>
As you can see, both the checkbox and the first text input are targeted by the input:read-only, even though only the first text input has the disabled attribute.
I've done some research and came across this article on the subject which stated :
:read-only is a CSS pseudo-class selector that matches any element that does not match the :read-write selector.
Naturally I followed with a research on the :read-write pseudo selector and ended up on the mdn web docs page, which stated :
The :read-write CSS pseudo-class represents an element (such as input or textarea) that is editable by the user.
I feel like, since I can toggle the value of the checkbox, it should be considered "editable by the user" ?
I've made some test in some browser, Both Firefox ( 90.0 ) and Brave ( v. 1.27.109 Chromium: 92.0.4515.115 ) seams to have the problem.
I also tested in an old version of chrome ( Version 89.0.4389.90 ) and the behavior was not the same. Both element were unaffected by the :read-only pseudo-element, and the second text field was affected by the read-write pseudo element, even with the disabled attribute. Weird.
Maybe I'm missing something obvious ?
I've found why this behavior is occuring.
According to the HTML standard
The :read-only pseudo-class must match all other HTML elements.
Here, the all other HTML elements refer to the html elements on which the :read-write property does not apply.
On the same page, we can see what define an html element that is :read-write-able.
The :read-write pseudo-class must match any element falling into one of the following categories, which for the purposes of Selectors are thus considered user-alterable:
input elements to which the readonly attribute applies, and that are mutable (i.e. that do not have the readonly attribute specified and that are not disabled)
textarea elements that do not have a readonly attribute, and that are not disabled
elements that are editing hosts or editable and are neither input elements nor textarea elements
The relevent part, here, is input elements to which the readonly attribute applies. If we check the HTML standard page for checkboxes, we can see that the readonly attribute, indeed, does not apply.
The following content attributes must not be specified and do not apply to the element: accept, alt, autocomplete, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, minlength, multiple, pattern, placeholder, readonly, size, src, step, and width.
Which makes the checkbox falls into the categories of html elements on which the :read-write property cannot be applied. Hense the behavior of the original question's snippet.
While this does not explain how to bypass the behavior ( see Aditya's answer ), It explains why it is occuring, which was the part I was originaly interessed in.
As an aditional note, I'm still not sure as why it the background-color was not working of the :read-only element in Chrome 89.
Try this out
input:read-write + label {
background-color: green;
}
input:disabled + label {
background-color: red;
}
<input type="checkbox" id="checkbox" />
<label for="checkbox">the checkbox</label>
<br />
<br />
<input type="text" disabled id="text"/>
<label for="text">the text</label>
<br />
<br />
<input type="text" id="text-active"/>
<label for="text-active">another text</label>
Instead of using read-only you can use disabled in your css
According to your question you need to change the style of a disabled input but as you're using :read-only this means the input which is set to readonly is changed!
input:read-only { background: #121212; color: #fff; }
input:disabled { background: #555; color: #00aeff; }
<input type="text" value="ReadOnly" readonly><br>
<input type="text" value="Disabled" disabled><br>
<input type="text" value="ReadOnly & Disabled" readonly disabled>
Check this WebPage Read more about Readonlys
Conclusion? Well there's a Difference between Read-Only and Disabled inputs.
Like the title says: can a checkbox be checked by default in the stylesheet, rather than in an inline HTML attribute?
Example from w3schools.com, the "car" box is checked:
<form action="demo_form.asp">
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car" checked> I have a car<br>
<input type="submit" value="Submit">
</form>
I'm making an "I agree to the Terms and Conditions" checkbox, and due to the clunky website I'm making this on, I can't create inline CSS. Instead, I can assign this field a css class, and edit the class in the larger stylesheet.
If it makes it easier, this will be the only checkbox on the page.
A checkbox cannot be checked in CSS, unfortunately. It relies on the checked attribute of the input element, and attributes cannot be modified via CSS.
Alternatively, you could look into a JavaScript solution, but of course the best way would be to edit the HTML directly.
First of all, this is not a css but a html element's attribute.
Another way to check it is with javascript, and with css you can only select it like this:
input[type=checkbox]:checked /* select checked checkbox */
input[type=checkbox] /* select any checkbox */
So I am using HTML checkboxes to create collapsible comment trees. The HTML and CSS code is fairly simple.
HTML:
<input type="checkbox" class="hide-box">
<div class="hidable">
Example<br>
<input type="checkbox" class="hide-box">
<div class="hidable">
Example
CSS:
.hide-box:checked~.hidable { display:none; }
My issue comes when I try to use a stylized checkbox. Every method I find to stylize a checkbox with CSS requires each checkbox to have a unique id which is matched to a "for=" in the checkbox label.
I'm going to be adding hundreds of these to several html documents with a mass find and replace, so I don't want to have to set up some kind of script to give each one a unique name.
Is there any method of stylizing the checkboxes that does not require giving each one a unique id? Preferably the solution would not require an javascript or jquery, I want to stick to html and css.
Use the attribute selector to access all checkboxes.
Then use id to access specific checkboxes that need to override the general style used for all checkboxes.
input[type=checkbox] {
// General styles for all checkboxes here
}
#specific-checkbox-id {
// Specific styles here
}
How about adding a class to all of your checkboxes and styling them using that class?
HTML:
<input type="checkbox" class="hide-box my-style">
<div class="hidable">
Example<br>
<input type="checkbox" class="hide-box my-style">
<div class="hidable">
Example
<input type="checkbox" class="my-style"> <!-- This won't have the hide logic-->
CSS:
.hide-box:checked~.hidable {
display:none;
}
.my-style {
// Insert your styles here
}
Hi I would like to target and modify the <label> tag only when is next to a input[type=radio], no in any other cirscuntances.
My code looks like this:
<fieldset>
<legend>Some legend</legend>
<p>Some explanation</p>
<label>
<input type="radio" name="#{name}" value="#{value}" />
</label>
</fieldset>
I tryied with fieldset label:first-child+input[type=radio]{} but doenst work, if someone can help me would be awesome.
EDIT:
What I want is to be able to style only the LABEL tag no the RADIO button INPUT tag, and this style will apply only when <label><input type="radio"></label> structure is found.
What you are asking for is not possible in CSS. It is not possible to traverse "back" or "up" the DOM tree (so you can't target previous siblings or parent nodes).
See this post: Is there a CSS parent selector?
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.