CODEWITHSUNDEEP
css
panait.distrati
panait.distrati

Reputation: 138

CSS Two-state button

I need a button-like control that has a checked property, so that when clicked it stays pressed. Something like the "Purge responses" button in the example image below.

How can I do this in CSS? I'm a CSS newbie. Can someone provide an example or point to one that is similar to this?

PS: I know that I need to use Javascript to update a boolean variable that holds the state of the button, and dynamically apply a style to the button. My problem is more like how to create a button that contains a checkbox , as I have only one image for background.

https://i.sstatic.net/vBV6F.png

Upvotes: 4

Views: 8665

Answers (4)

Dan
Dan

Reputation: 2341

To reduce JavaScript coding, it's best to nest a checkbox inside a label in the HTML. This will make it automatically handle the checking/unchecking of the checkbox when you click on the label.

/* If you have more experience in JavaScript, I recommend not binding the change event this way, I didn't bother much about this part, since I guess it isn't part of the question */
    function change_state(obj){
        if (obj.checked){
            //if checkbox is being checked, add a "checked" class
            obj.parentNode.classList.add("checked");
        }
        else{
            //else remove it
            obj.parentNode.classList.remove("checked");
        }
    }
    /* this is the style of an unchecked "button" */
    .input-check{
        display:inline-block;
        height:20px;
        padding:5px 8px;
        background:green;
        width:70px;
        color:white
    }
    /* This is the style for a checked "button" */
    .input-check.checked{
        background:red;
        color:black;
        font-weight:bold
    }
    /* Hide the checkbox */
    .input-check input{
        display:none
    }
<label class="input-check"><input onchange="change_state(this)" type="checkbox" value="something" name="test"/> click me </label>

Upvotes: 5

arjabbar
arjabbar

Reputation: 6404

Why don't you just style a checkbox to look like a button?

Then you can use the :checked CSS psudeo selector to style it the way you want without adding classes through javascript.

Here's an elaborate example in CodePen: http://codepen.io/arjabbar/pen/csafj

Upvotes: 1

user606547
user606547

Reputation:

No CSS needed, if I understand what you want correctly

<button><input type="checkbox" /> Purge</button>

Then you'll likely need javascript to check and uncheck the box when the button is clicked, but the above is the basic idea.

Here's with a bit of quick js

<html>
<head>
<script type="text/javascript">
function check() {
    var c = document.getElementById('check') ;

    c.checked = (c.checked) ? false : true ;
}
</script>
</head>
<body>
    <button onclick="check()"><input type="checkbox" id="check" /> Purge</button>
</body>
</html>

Upvotes: -1

Greg
Greg

Reputation: 781

See the section here titled checkbox button. If I'm understanding your question correctly, that seems to do what you're after, maybe with a little modification.

Upvotes: 0

Related Questions