The Spanner logo
    • Home
    • Blog
      • Blog home
      • RSS
    • Login
    • Home
    • Blog
      • Blog home
      • RSS
    • Login
    The Spanner logo

    The Spanner
    Web security blog

    Made by Gareth Heyes
    Follow me on Twitter: @garethheyes

    Javascript for hackers!

    Hackvertor logo
    Shazzer logo
    My Github account
    Recent posts
    Introducing Feedworm: A Privacy-First RSS Reader That Lives in DevToolsSpeedy RSVP extensionAutoVaderHackvertor history and tag finderShadow Repeater v1.2.3 releaseBurp Hackvertor v2.1.24 releaseHacking roomsXSSing TypeErrors in SafarivalueOf: Another way to get thisMaking the Unexploitable Exploitable with X-Mixed-Replace on FirefoxThe curious case of the evt parameterCSS-Only Tic Tac Toe ChallengeRewriting relative urls with the base tag in SafariBypassing DOMPurify with mXSSNew IE mutation vectorHow I smashed MentalJSMentalJS DOM bypassAnother XSS auditor bypassXSS Auditor bypassBypassing the IE XSS filterUnbreakable filterMentalJS bypassesmXSSJava SerializationBypassing the XSS filter using function reassignmentRPOSandboxed jQueryX-Domain scroll detection on IE using focusEpic fail IEnew operatorDecoding complex non-alphanumeric JavaScriptHacking FirefoxDOM ClobberingBypassing XSS AuditorThe evolution of codeNon-Alpha PHP in 6-7 charsetTweetable PHP-Non AlphaMentalJS for PHPOpera x domain with video tutorialSandboxing and parsing jQuery in 100ms

    CSS toggle buttons

    By Gareth Heyes (@hackvertor)

    Published 18 years 6 months ago • Last updated March 22, 2025 • ⏱️ < 1 min read

    ← Back to articles

    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

    ← Back to articles