Przycisk radiowy w przeglądarce internetowej i style pól wyboru

Question

Praca z wyskakującymi widokami na Androida dla przycisków radiowych i pola wyboru, próbowałem wielu stylów ze standardowym znacznikiem html, ale nie jest to prawidłowe. Jego alwy są bardzo małe z HDPI, XHDPI i Tab.

Style stosowane do pól wyboru

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

Style stosowane dla przycisków radiowych

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

znaczniki HTML stosowane dla przycisku radiowego

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

znaczniki HTML stosowane do pól wyboru

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

Każdy ma jakiś pomysł. Proszę pomóż mi.

Ex: Zrzut ekranu pochodzi z Tab

Answer 1

Wystarczy dodać -webkit-appearance:none do swojego CSS. Wtedy możesz całkowicie wyposażyć tego rodzaju elementy.

Tak Twój kod będzie jak:

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

i

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

Uwaga: Wystarczy pamiętać, że ta właściwość usuwa każdy rodzaj stylu od elementu, więc trzeba będzie ponownie -wzoru to całkowicie.

In this blog post od CSS Tricks można przeczytać więcej o appearance i jego zgodności w różnych przeglądarkach.