6

ラジオ ボタンとチェック ボックスの android webviews を使用して、標準の html マークアップを使用して非常に多くのスタイリングを試みましたが、適切に表示されませんでした。HDPI、XHDPI、およびタブを使用すると、常に非常に小さくなります。

チェック ボックスに使用されるスタイル

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="">

誰もが何らかの考えを持っています。私を助けてください。

例: タブから取得したスクリーンショット

ここに画像の説明を入力

4

1 に答える 1

1

-webkit-appearance:noneCSSに追加するだけです。次に、この種の要素のスタイルを完全に設定できます。

したがって、コードは次のようになります。

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 postappearanceCSS Tricks から、 、およびブラウザー間の互換性について詳しく読むことができます。

于 2013-10-16T19:34:26.987 に答える