Android webview radio button and check box styles

Question

Working with android webviews for radio buttons and check box, I tried so many styling with standard html markup but its not showing proper. Its alwyas comes up very small with HDPI,XHDPI and with Tab.

Styles used for check boxes

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

Styles used for radio buttons

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

Html Markup used for radio button

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

Html Markup used for Check boxes

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

Anyone has any idea. Please help me.

Ex: Screenshot taken from Tab

Answer 1

Simply add -webkit-appearance:none to your CSS. Then you can totally style this kind of elements.

So your code would be like:

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

and

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

Note: Just remember that this property removes any kind of style from the element, so you will have to re-style it totally.

In this blog post from CSS Tricks you can read more about appearance, and its compatibility across browsers.