Hi i found this glorius code while looking for help with my issue of having a click box on the screen that will turn 4 different colours. here is the code i found which is perfect. All i want is to start at yellow, got to amber onlick, go to red on a 2nd click and go to white on the 3rd click
<html>
<body>
<style>
.H1toH5 input { display: none; }
.H1toH5 .seatButton { padding: 5px; border: 1px solid #ccc; background: yellow; }
.H1toH5 input:checked + .seatButton { background: red; }
</style>
<div class="H1toH5">
<label>
<input type="checkbox" />
<span class="seatButton">H1</span>
</label>
</body>
</html>
im pretty new to css but its got me hooked atm! Any help is appreicated
You can achieve this functionality simply by using JavaScript.
Updated Part
You can do this with any number of colours. Just make a dictionary with key/value pairs, where the key is the index and the value is the colour.
Something like this
Here's the code for 32 colours.