Change element state via CSS and retain that state

I wanted to add checkboxes to my step-by-step instructions in Wordpress, but wordpress.com does not allow form elements or Javascript on its free blog sites. The checkboxes would be used to check off the completed step.

I was looking at CSS transitions. Perhaps a change from one color to another would suffice. But the w3 examples show a change from size or color on hover, then they revert back. Is there a way to change the state of something via CSS, and stay in that state for the duration of the browser session?

Hi,

It’s unclear to me how you would want to apply the changes but you can’t make a persistent change via hover. You can style elements that have an :active state and they will stay styled as long as they are active and similarly for :target, but the effect is lost once another element becomes :active or is the target.

What were you hoping to style and how/when were you going to apply the styles? Why can’t you just add normal css to change the colour/background of an element?

Since I can’t use JS or form elements like input type=checkbox, I’m looking for an alternate. I want to style a small box that, when clicked on, changes color, or changes to a “checked” image. This small box will be next to each step of my blog post as a replacement for a checkbox to show that the task has been completed. I suppose each “checkbox” would have a different id applied to keep their state for that session.

I wondered whether pure CSS would up to this or not.

No you can’t do that I’m afraid. The nearest you could get would be to use an anchor and then style its active state (a.test:active{background:red}) but that will only remain red until another part of the page is clicked.

I’ll have to give it up then. Thanks for answering!

What about having an a.test:[COLOR="#FF0000"]visited[/COLOR] style instead? The visited styles tent to persist.

I thought of visited too, but can’t get it to work:

<style>a.test:visited{color:gray; decoration:none} </style>
<p><a href=“” class=“test”>▶</a> some text here</p>

I thought of visited too, but can’t get it to work

That’s an issue with webkit, which doesn’t like to apply any other attribute other than color: to a:visited.

Just so you know, what you are trying to do really violates separation of style and functionality ( not to be confused with keeping content and style separate). But looking the other way… you could do this ( tho for the afore mentioned reason i would advice against it)

You could have an ending step coded outside and previous to your element.


<!DOCTYPE HTML>
<html>
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<style type="text/css">
		
		.done:checked + .stuff {background:pink;}
		.PosContext{position: relative;  border: 1px solid #000; margin-bottom:1em}
		.stuff {padding:1em 1em 2em 1em;}
		.done {position: absolute;  }
		label.done {left: 2em; bottom:.5em}
		input.done {left: 1.25em; bottom:.75em}
		</style>
	</head>
	<body>
<div class="PosContext">
	<input class="done" type='checkbox' id="lastItem1">
		<div class='stuff'> your other form controls here
		<label for="lastItem1" class='done'> 'ok am done' equivalent </label>
	</div>
</div>
<div class="PosContext">
	<input class="done" type='checkbox' id="lastItem2">
		<div class='stuff'> your other form controls here
		<label for="lastItem2" class='done'> 'ok am done' equivalent </label>
	</div>
</div>
	</body>
</html>


This is just for proof of concept , and ad it will limit your support ( tho most modern browsers will handle this).

Hope that helps.

According to the OP, can’t use <input>