Change element state via CSS and retain that state

**StevenHu** · Sep 27, 2012 07:46

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?

**Paul O'B** · Sep 27, 2012 10:16

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?

**StevenHu** · Sep 27, 2012 10:26

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.

**Paul O'B** · Sep 27, 2012 13:56

Originally Posted by StevenHu

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.

**StevenHu** · Sep 27, 2012 14:23

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

**ralph.m** · Sep 27, 2012 23:22

Originally Posted by Paul O'B

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.

What about having an a.test:visited style instead? The visited styles tent to persist.

**StevenHu** · Sep 28, 2012 08:05

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>

**dresden_phoenix** · Sep 28, 2012 10:14

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.

Code:

<!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.

**StevenHu** · Sep 28, 2012 10:16

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

User Tag List

Thread: Change element state via CSS and retain that state

Thread Tools

Display

Change element state via CSS and retain that state

Bookmarks

Bookmarks

Posting Permissions