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
}
Related
I want to assign different values to a CSS property for some other element when different radio buttons are checked.
`<input type="radio" name="for-image" id="img-1">
<input type="radio" name="for-image" id="img-2">
<input type="radio" name="for-image" id="img-3">`
You need to use CSS selectors for that. With CSS selectors you can target elements like so: div:first-of-type or div:nth-of-type(3).
You may also need to use the :checked selector to trigger styles for when a checkbox is selected. CSS selectors can be combined too!
To see how they work and which CSS selectors are there for you to use, please read this link: W3Schools CSS Selectors
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.
<datalist> is an HTML5 tag which is use in order to order elements and choose them. when i use it with <input>, it gives me this.
i dont want to see list items like that before i typed it on, so can i eliminate this down button on it. is there an attribute for this?
ALSO can i use it other tags than <input>
NO is not an answer for this question!
To remove the down arrow, try using the following in your CSS:
input::-webkit-calendar-picker-indicator {
display: none;
}
Example http://jsfiddle.net/5UYdy/
Unfortunately, there is no selector which does it.
BUT!
You can add required attribute to the <input> tag. Then, we can access this input by CSS3 tags:
input:valid - when input has content
input:invalid - when input is blank
Adding following style:
input:invalid::-webkit-calendar-picker-indicator {
display: none;
}
will show the list only when the input is not empty.
The following JSFiddle shows that in action, hope it helps:
http://jsfiddle.net/5UYdy/2/
The only disadvantage is that the input is required.
And no, you can't use it with other elements, according to W3Schools
The tag specifies a list of pre-defined options for an element.
This will remove history of an input box but...,
<input type="text" autocomplete="off"/>
but I think there is no way to remove <datalist>
your best bet is this:
input::-webkit-calendar-picker-indicator {
opacity: 0;
}
<div class="form-field__control">
<input
type="text"
list="currency"
id="currency"
/>
<datalist id="currency">
<option>Dollars</option>
<option>Pounds</option>
<option>Naira</option>
<option>Peso</option>
</datalist>
</div>
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.
If I have the following:
<label for="deletetxt">Delete This Text</label>
What is the 'for' attribute here? Is that the id?
Assuming that I cannot set a class for the label element to style the label element, how do i set css for this element?
The for attribute contains the ID of the element that the label is for. I always thought this would be quite intuitive...
<label for="SomeTextField" id="SomeLabel">Some text field</label>
<input type="text" id="SomeTextField">
You style a label like any other element:
label {
font-weight: bold;
color: red;
}
I always thought this would be quite intuitive, as well. So - what are you really trying to do, the questions you ask are a sign that you have a different problem, actually.
Two question, two answers:
What is the 'for' attribute here?
It's here to tell the ID of the <input> element that label refers to. Some browsers will use it to set focus on that <input> element when user clicks on that <LABEL>
how do i set css for this element?
A. If you want to CSS all label elements :
label {
/* your styles */
}
B. If you want to label that element, just use IDs or classnames as you usually do.
The for attribute is the input/textarea/select that the label refers to.
You can still assign an id to the label:
<label id="myLabel" for="deletetxt">Delete This Text</label>
You can also wrap the input/textarea/select with the label in order to associate them without the for attribute.
<label id="myLabel">Delete This Text <input ... /></label>
The For tells the label which element to belong to (which really means that when the label is clicked the element will get the focus).
As for your second question - you can use jQuery:
- If your html is static use $("label:eq(index)")
- If your html is dynamic and you know the id of the element the label belongs to, you can use $("label[for='thatid']")
HTML Label Tag is used for forms and submittion. it is not the ID, this 'for' should have the same name as the ID of the object connected to it - for example
<form>
<label for='ford'>Ford Car</label>
<input type="radio" name="fordCar" id="ford" />
</form>
Its a usability object really.
"for" is the id of the form element that the label should be associated with.
You can add an id to the label to reference it directly.
<label for="fname" id="lbl-fname">First:</label>
<input type="text" id="fname" />
you can set an id as well as a class http://www.w3schools.com/tags/tag_label.asp
the for "Specifies which form element a label is bound to" so when a user clicks on the label it focuses on the target input.
With razor in Html I don´t find the best way for assign the id of a label, but you can assign the id in this way:
#Html.Label("© Integrantes Grupo:",new { #id="TitleIntegrants"} )