Pulsante di opzione WebView Android e stili casella di controllo

Question

Lavorando con le visualizzazioni Web di Android per i pulsanti di opzione e la casella di controllo, ho provato così tanti stili con il markup html standard ma non è corretto. Il suo alwyas si presenta molto piccolo con HDPI, XHDPI e con Tab.

stili utilizzati per le caselle di controllo

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

stili utilizzati per pulsanti di opzione

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

Tag HTML utilizzato per pulsante di scelta

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

Tag HTML utilizzato per Caselle

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

Chiunque ha qualche idea. Mi aiuti per favore.

Es: Schermata preso da Tab

Answer 1

Basta aggiungere -webkit-appearance:none al vostro CSS. Quindi puoi totalmente stile questo tipo di elementi.

Quindi il codice sarebbe come:

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

e

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

Nota: Basta ricordare che questa proprietà elimina ogni tipo di stile dall'elemento, in modo da avere a ri lo stile in tutto e per tutto.

In this blog post da Trucchi CSS è possibile leggere ulteriori informazioni su appearance e la sua compatibilità tra i browser.