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

Question

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.

Elexa

That is not css.. it is attribute of that element.. and to be more precise css cant do that at all. you'll need to use js. – Ferebee

I'm not sure this is legal. – Crap

Everyone had good answers for working around, but @Crap had the most useful comment: "I'm not sure this is legal". I should leave the T&C box UNCHECKED by default, since the user has to actively agree to the T&C. Otherwise, there might be some sort of legal vulnerability. Thanks everyone for the speedy responses!! Now I get to tell my boss how I probably just avoided getting us into legal trouble! (For posterity: another solution could have been some text above the submit button, saying "By clicking submit, you agree to T&C) – Elexa

Answer 1

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.

Overblown

Answer 2

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 */

Eos