Android webview switcher buttons and check box

Question

While working with android webviews for radio buttons and checkboxes, I tried so many styles with standard html markup but didn't show them correctly. Its alayas are very small with HDPI, XHDPI and Tab.

Styles Used For Checkboxes

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 checkboxes

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

Anyone has an idea. Please help me.

Example: Screenshot from Tab

Answer 1

Just add -webkit-appearance:none to your CSS. Then you can completely style these elements.

So your code will look like this:

 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 style from the element, so you have to completely reconfigure it.

In this blog post from CSS tricks you can learn more about appearance and its compatibility between browsers.