CSS toggle buttons

Thursday, 29 November 2007

Thornmaker has improved my CSS logic script which is much neater and requires less styles, good work 🙂 Sirdarckcat has also created multiplication which is amazing stuff, so I had a bit of spare time and I decided to see if it was possible to create toggles in CSS with a visual appearance of a button instead of using plain checkboxes. Turns out you can 🙂 with a little opacity trick. Firefox still interacts with form objects even if they are invisible. It may be possible to take this further and manipulate HTML by hiding and showing code.

CSS Toggle buttons

Update…

I’ve added a HTML example, it’s possible to change the content of the text within the tags as well but for now this demo makes the text bold by showing and hiding tags.

CSS HTML trick

The entry 'CSS toggle buttons' was posted on November 29th, 2007 at 11:06 am and last modified on November 29th, 2007 at 11:40 am, and is filed under Cascading Style Sheets, Security. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

6 Responses to “CSS toggle buttons”

  1. 排 尾 DaCat writes:
    No. 1 — November 29th, 2007 at 1:55 pm

    Hi gareth

    The checkbox toggle stuff is how the “Pop up” section on CSK2 (www.sirdarckcat.net/csk2.html) works.

    Any way, thornmaker and I are thinking on a way of doing Pascal Triangle, and/or Fibonacci Numbers, via CSS calculation.

    Anyway, CSS3 has a bag full of tricks, have you seen the calc() function? I think it’s static, but is worth a look.

    Greetz!!

  2. Gareth Heyes writes:
    No. 2 — November 29th, 2007 at 2:04 pm

    Ah ok sorry I didn’t realise.

    I’m trying to get loops to work but it’s proving difficult because there’s no way for CSS to introduce state. If is was possible to check a checkbox within CSS then it would be. 🙁

  3. auron writes:
    No. 3 — November 29th, 2007 at 3:48 pm

    To build a working loop, two things are needed: an if statement, and a goto .
    If the choosen statement is the “:checked” condition, then the “goto” should be able to manipulate ( check and uncheck) checkbox.
    If this is not possible, the only solution is to change the “if ” to something else…

    PS: this is a really inspiring worg, thanks 🙂

  4. Master Ternary Li writes:
    No. 4 — November 29th, 2007 at 7:05 pm

    loops can also be provided without a goto statement by using recursion.

  5. Daren writes:
    No. 5 — March 17th, 2008 at 9:24 pm

    Have you come across css toggling using a form selector at all? so you just click on the selector and then choose which stylesheet you wanna use? perhaps choose between three? any ideas?

  6. mippy writes:
    No. 6 — July 28th, 2008 at 7:26 pm

    A goto statement, what the hell is this qbasic?

«
»