Can a checkbox be checked by default in the stylesheet, rather than in an HTML attribute?

html css checkbox checked
Rachel picture Rachel · Sep 29, 2015 · Viewed 15.5k times · Source

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.

Answer

Maximillian Laumeister picture Maximillian Laumeister · Sep 29, 2015

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.

Related questions

How to style a checkbox using CSS

I am trying to style a checkbox using the following: But the style is not applied. The checkbox still displays its default style. How do I give it the specified style?

Read More
Radio/checkbox alignment in HTML/CSS

What is the cleanest way to align properly radio buttons / checkboxes with text? The only reliable solution which I have been using so far is table based: <table> <tr> <td><input type="radio" …

Read More
How to change the background color on a input checkbox with css?

Hello Friends all I'm trying to do is change the background color of a checkbox. I tired many things but nothing works. Can some one help? input[type="checkbox"] { background: #3d404e; border: #7f83a2 1px solid; }

Read More