1

I have a checkbox below:

foreach($options as $indivOption) {
   echo '<input type="checkbox" name="options[]" id="option-' . $indivOption . 
        '" value="' . $indivOption . '" /><label for="option-' . $indivOption . 
        '">' . $indivOption . '</label>';
}

My question is simply how to convert a checkbox into looking like a button. I want the design to work on all browsers and work on all screen sizes but does anybody know how to do this?

Vukašin Manojlović
  • 2,645
  • 2
  • 21
  • 26
user1723760
  • 1,157
  • 1
  • 9
  • 18
  • Can you give an example of what you want? – David Feb 08 '13 at 15:01
  • [Duplicate?](http://stackoverflow.com/questions/4148499) – Ahmet Kakıcı Feb 08 '13 at 15:04
  • @David Like this fiddle but measurements to be able to work on all screen sizes, i think the one in the fiddle is for a specifc screen size: http://jsfiddle.net/zAFND/4/ – user1723760 Feb 08 '13 at 15:07
  • The key to this question is I how to get the checkbox button look fine in all screen sizes (using %) as that it could be displayed on a laptop, computer or ipad screen for example – user1723760 Feb 08 '13 at 15:10
  • @user1723760 Just use `width:40%`? I don't see how it can't be displayed poorly on different resolutions. – David Feb 08 '13 at 15:11
  • @David This what happens when I put width as 40%: http://jsfiddle.net/zAFND/612/ The button goes shorter – user1723760 Feb 08 '13 at 15:17
  • @user1723760 Play around with padding? – David Feb 08 '13 at 15:21
  • @user1723760 No problemo. Just be sure to close this question. I'll put my own answer up. – David Feb 08 '13 at 15:25
  • http://jquerymobile.com/demos/1.2.0/docs/forms/checkboxes/ I guess this is what you need. Inspect the code and study the implementation. – Rain Diao Feb 08 '13 at 15:28

2 Answers2

0

You can use a html <label> element:

<label>Button<input type="checkbox"></label>

then you use CSS to style the label and hide the checkbox (using position: absolute with a negative top/left

label {
    overflow: hidden;
    display: block;
    background: red;
    ...
}

label input[type="checkbox"] {
    position: absolute;
    left: -9999px;
    top: -9999px;
}
Roger C
  • 338
  • 1
  • 5
0

You just have to play around with padding.

David
  • 877
  • 1
  • 7
  • 18