Menu
Is it possible to create a page which changes on click on various elements and bind multiple events to various elements of the page without using any javascript?
745
The best answer demonstrates a lot of cool tricks that can be done with pure CSS , however, it does not demonstrate how to post data to a form using onclick without JavaScript . Most people will tell you that it is not possible, however that is simply not true.
To use CSS onClick, you'll essentially need to create a pseudo class. You'll use CSS selectors and the checkbox hack to produce something like an OnClick function. And you can get away with this if you just want to use only CSS to make some minor changes, like border width or border radius.
event: Event can be any valid JavaScript event. Events are used without the “on” prefix like use “click” instead of “onclick” or “mousedown” instead of “onmousedown”. listener(handler function): It can be a JavaScript function that responds to the event that occurs.
The best way (actually the only way*) to simulate an actual click event using only CSS (rather than just hovering on an element or making an element active, where you don't have mouseUp) is to use the checkbox hack. It works by attaching a label to an <input type="checkbox"> element via the label's for="" attribute.
Yes, it is, there are multiple ways to do this, it can be done using :focus, :active, :checked. View demo.
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:
<input type="checkbox" id="cb1" /><span>This will change color</span>
and the css:
span { color: red; }
input:checked + span { color: blue; }
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:
<label for="cb1">Click here to toggle checkbox</label>
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 <label for="id"> 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.
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.
For a more complicated example and even a micro-demo of a lightbox like effect achieved using this see this fiddle.
118
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With