SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,338
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    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?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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?

  3. #3
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,338
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by StevenHu View Post
    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.

  5. #5
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,338
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I'll have to give it up then. Thanks for answering!

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,338
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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>&nbsp;some text here</p>

  8. #8
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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.

  9. #9
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,338
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    According to the OP, can't use <input>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •