StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Yes, it is, there are multiple ways to do this, it can be done using :focus, :active, :checked. View <a href="http://jsfiddle.net/AA4aK/2/" rel="nofollow">demo</a>.</p> <p>Following is an example using :checked why I choose this over the others is because it simplifies writing css rules and allows me to use multiple elements to interact with it from various places. But enough talking, the html:</p> <pre><code><input type="checkbox" id="cb1" /><span>This will change color</span> </code></pre> <p>and the css:</p> <pre><code>span { color: red; } input:checked + span { color: blue; } </code></pre> <p>You may say that checkboxes are ugly and they don't look the same on all browsers, that is true, but you don't have to display them, you can use a label with a for attribute to affect the state of the checkbox, for the previous example this can be achieved using:</p> <pre><code><label for="cb1">Click here to toggle checkbox</label> </code></pre> <p>Ok, but now you may think things get complicated because you use 2 elements instead of one, yes, but at the same time, due to the fact that <code><label for="id"></code> selects an element by id you can place your label anywhere you like in the document, and more than that you can use multiple labels to change the state of the same input. and you can give them their own ids or classes and style them differently as well if you want.</p> <p>Even more is that you can combine multiple input's states and add a rule on that if you'd like to which, from what I know is currently not available with any other pure HTML + CSS solution.</p> <p>For a more complicated example and even a micro-demo of a lightbox like effect achieved using this see this <a href="http://jsfiddle.net/AA4aK/2/" rel="nofollow">fiddle</a>.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload