Android webview单选按钮和复选框样式

Question

使用Android网页浏览单选按钮和复选框，我尝试了很多样式与标准的HTML标记，但它没有显示正确。它的alwyas非常小，HDPI，XHDPI和Tab。

用于复选框的样式

input[type="checkbox"] {
width: 18px;
padding: 2% 1%;
height: 18px;
margin: 2px 0;
}

用于单选按钮的样式

      input[type="radio"] {
        width: 1em;
        height: 1em;
        -webkit-border-radius: 1em;
        border-radius: 1em;
      }

用于单选按钮的Html标记

<input type="radio" name="select_ship_address" id="shippingInfo"/>

用于复选框的Html标记

<input class="floatLeft AddressTxt" tabindex="10" type="checkbox" id="optionOne" name="customer" rel="optional" value="yes" checked="">

任何人都有任何想法。请帮帮我。

Ex：从Tab

中截取的截图

Answer 1

只需将-webkit-appearance:none添加到您的CSS即可。然后你可以完全设计这种元素。

所以你的代码就像：

input[type="checkbox"] {
    -webkit-appearance:none;
    width: 18px;
    padding: 2% 1%;
    height: 18px;
    margin: 2px 0;
}

和

  input[type="radio"] {
    -webkit-appearance:none
    width: 1em;
    height: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
  }

注意：请记住，此属性会从元素中删除任何类型的样式，因此您必须完全重新设置样式。

来自CSS Tricks的

In this blog post您可以阅读有关appearance及其跨浏览器兼容性的更多信息。