Checkbox CSS on Windows Phone not showing

Question

I'm creating a responsive website and using a checkbox to show/hide the menu on mobile devices. The css styling (background image, colour etc) works fine on all mobile browsers I've tried, except Windows Phone 8 running IE browsers.

This is the css:

input#show-menu[type=checkbox] {
    width: 48px !important;
    height: 48px !important;
    background: transparent url(images/mobile_menu.png) no-repeat center center;
    background-size: 15px 16px; 
    -webkit-appearance: none;
    float: right;
    border-radius: 0;
    display: block;
}

input#show-menu[type=checkbox]:checked {
    background: #153e69 url(images/mobile_menu_close.png) no-repeat center center;
    background-size: 15px 16px;
}

The css works fine in mobile emulators, even Windows 8 emulators, but on the actual device (in this case a Nokia Lumia 520) it doesn't render the css.

Tried to attach screen shots but apparently I need 10 reputation points to do that??!!

Thanks.

Answer 1

OK, so I worked this out myself, posting here for anyone else who comes across the same issue. Basically you can only style the <label> and not the <input> and it must also be a class not an id. You also need to set the <input> to display:none

Here's the html and css that worked for me:

<input type="checkbox" id="show-menu" role="button">
<label for="show-menu" class="show-menu">Show Menu</label>

.show-menu {
    width: 48px !important;
    height: 48px !important;
    background: transparent url(images/mobile_menu.png) no-repeat center center;
    background-size: 15px 16px; 
    -webkit-appearance: none;
    -ms-appearance: none;
    -moz-appearance: none;
    float: right;
    border-radius: 0;
    text-indent: -999px;
    overflow: hidden;
    display: block;
}

input#show-menu[type=checkbox]:checked ~ .show-menu {
    background: #153e69 url(images/mobile_menu_close.png) no-repeat center center; 
    background-size: 15px 16px;
}