Windows Phone 上的复选框 CSS 未显示

Question

我正在创建一个响应式网站并使用复选框 show/hide 移动设备上的菜单。 css 样式（背景图像、颜色等）在我尝试过的所有移动浏览器上都能正常工作，除了 Windows Phone 8 运行 IE 浏览器。

这是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;
}

css 在移动模拟器中运行良好，甚至 Windows 8 模拟器，但在实际设备（在本例中为诺基亚 Lumia 520）上它不会呈现 css.

试图附上屏幕截图，但显然我需要 10 点声望才能做到这一点？？！！

谢谢。

Answer 1

好的，所以我自己解决了这个问题，在这里发布给遇到同样问题的其他人。基本上你只能设置 <label> 的样式而不是 <input> 并且它还必须是 class 而不是 id。您还需要将 <input> 设置为 display:none

这是对我有用的 html 和 css：

<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;
}

Windows Phone 上的复选框 CSS 未显示

Checkbox CSS on Windows Phone not showing

css

responsive-design

windows-phone-8