0

モバイル サイトにラジオ ボタンを追加しましたが、特に iPhone ブラウザーでグラデーション塗りつぶしの正方形に見えます。クリックすると、選択されたラジオ ボタンが明るい境界線で表示されます。他の電話ブラウザでは、境界線のみのラジオ ボタンのない Windows や Android フォンのように適切に見えます。

CSSでこれを制御しようとしましたが、うまくいきません。

input[type="radio"] {border: none!important; background-color: transparent; appearance: radio; -moz-appearance: radio; -webkit-appearance: radio;}

これが実際のボタン コードです。

<input type="radio" name="ratings[1]" id="Quality_1" value="1">

これを解決するために体を助けることができますか？

4

2 に答える 2

1

ラジオ ボタンに適用される CSS スタイルは次のとおりである必要があります。

  1. 境界線の半径を設定する (半径の値を 2px などに) - これにより、正方形の効果が生じます
  2. 背景色の設定 - グラデーションの色を指定します。

たとえば、CSS に次のようなものがあるとします。

input { 
    border-radius:2px;
    background-image: -webkit-linear-gradient(top, rgb(186,0,0) 0%, rgb(255,59,59) 49%);
}

試したように CSS スタイルでオーバーライドするか、ラジオ ボタンに影響を与える CSS スタイルを作成して、ラジオ ボタンに影響を与えないようにする必要があります。

たとえば、CSS クラスを次のように変更すると、クラスがラジオ ボタンに適用されなくなります。

input:not([type='radio'])
    border-radius:2px;
    background-image: -webkit-linear-gradient(top, rgb(186,0,0) 0%, rgb(255,59,59) 49%);
}

注: CSS の例にエラーがあります。これがおそらく背景色がまだ残っている理由です。 と の間にはスペースが必要noneです!important。

border: none !important;
于 2013-11-15T05:06:10.193 に答える