Make a checkbox look like a button CSS

Question

I think what I am trying to achieve can be done in a simpler manner. However I have little JS experience and none in the way of CSS. So I'm utilizing prebuilt CSS and JS code and subtlety modifying it. So I will explain my end goal and see if what I currently have is acceptable.

1. A top menu on the webpage that has push buttons and checkboxes that all visually look the same
2. I would like checkboxes to look like buttons, eg no checkbox only the label.
3. I would like for the checkbox to still retain its functionality as a checkbox given the JS code it is calling
4. Is the way I'm calling the JS code through the button and checkbox correct or too complicated?

JSFiddle

---

<li><a title="Zoom to U.S" input type="button" name="US" onclick="US();"><span>Zoom to U.S.</span></a></li>  
<li><a title="Test 1 KML"><input type="checkbox" id="kml-red-check" name="kml-red-check" onclick="toggleKml("red");"><span>Test 1 KML</span></a></li>

Answer 1

It is not possible to change the appearence of a checkbox so radically using CSS.

What you CAN do though, is style a label element enough to make it look like a button. Due to the nature of the label element, clicking it will toggle the state of the checkbox keeping your functionality intact.

Here is how to do it

Markup

<li>
    <label for="kml-red-check">I am a button!</label>
    <input type="checkbox" id="kml-red-check" name="kml-red-check" onchange="toggleKml("red");">
</li>

Note that I've changed the onclick handler to onchange since now it is impossible to click the checkbox itself. Its value changes though when you click on the label

Styling

label[for="kml-red-check"]{
   //Your CSS goes that makes the label look like a button goes here
}
#kml-red-check{
    display:none;
}

Answer 2

 .hidden { position: absolute; visibility: hidden; opacity: 0; } input[type=checkbox]+label { color: #ccc; font-style: italic; } input[type=checkbox]:checked+label { color: #f00; font-style: normal; }

 <input type="checkbox" class="hidden" name="cb" id="cb"> <label for="cb">text</label>

http://css-tricks.com/almanac/selectors/c/checked/

Won't work on lt IE9 though.

edit: Following your markup it should be something like this:

<ul>
<li><input id="cb1" name="cb1-name" type="checkbox" onkeypress="setTimeout('checkIt(\'cb1\')',100);"><label for="cb1" onclick="setTimeout('checkIt(\'cb1\')',100);">text 1</label></li>
<li><input id="cb2" name="cb2-name" type="checkbox" onkeypress="setTimeout('checkIt(\'cb2\')',100);"><label for="cb2" onclick="setTimeout('checkIt(\'cb2\')',100);">text 2</label></li>
</ul>

And then check if the checkbox is checked or not in your function. onchange / onclick in a checkbox doesn't work in IE

edited again: changed NAME attribute so you won't end up having problems further along the line. And added a little workaround for the unresponsive, though ultimately desired, onchange functionality in IE8. Eventually you should add a timer to your function, rather than inline.

function checkIt(e){
    if(document.getElementById(e).checked){
    alert('checked');
    } else {
    alert('unchecked');
    }
}

Answer 3

<label>
  <input type="checkbox" ng-model="vm.abc" ng-change="vm.go()"/>
  <span>this is button add some css to lokking like a button</span>
</label>

this will work like button , if you don't want to show checkbox use this

<label>
  <input type="checkbox" ng-model="vm.abc" ng-change=vm.go()" hidden=''/>
  <span>this is button add some css to lokking like a button</span>
</label>

check it out here https://jsfiddle.net/h0ntpwqk/2/