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

Question

使用Android webviews的单选按钮和复选框,我尝试了很多样式与标准的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="">

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

例如:从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;
  }

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

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