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

Question

使用 android webviews 的单选按钮和复选框，我尝试了很多使用标准 html 标记的样式，但显示不正确。它的 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="">

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

例如：从选项卡截取的屏幕截图

在此处输入图像描述

score 1 · Accepted Answer

只需添加-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及其跨浏览器兼容性的信息。

1 回答 1