web-dev-qa-db-ja.com

ラジオボタンの色を変更するにはどうすればよいですか？

つまり、ラジオボタン自体は丸い形と中央のドットで構成されます（ボタンが選択されている場合）。私が変えたいのは、両方の色です。これはCSSを使用して実行できますか？

htmlcssformsradio-button
76
catandmouse

ラジオボタンは、各OS /ブラウザに固有のネイティブ要素です。カスタム画像を実装するか、画像を含むカスタムJavascriptライブラリを使用する場合を除き、色/スタイルを変更する方法はありません（例 this - cached link ）

58
Fred

簡単な修正は、:afterを使用してラジオボタン入力スタイルをオーバーレイすることですが、おそらく独自のカスタムツールキットを作成することをお勧めします。

    input[type='radio']:after {
        width: 15px;
        height: 15px;
        border-radius: 15px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: #d1d3d1;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid white;
    }

    input[type='radio']:checked:after {
        width: 15px;
        height: 15px;
        border-radius: 15px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: #ffa500;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid white;
    }
<input type='radio' name="gender"/>
<input type='radio' name="gender"/>
71
JamieD

のみ Webkitベースのブラウザ（ChromeとSafari、おそらくChrome WebAppを開発している...）をターゲットにしている場合、次を使用できます。

input[type='radio'] {
   -webkit-appearance: none;
}

そして、背景画像を適用するなど、単純なHTML要素のようにスタイルを設定します。

入力が選択されたときにinput[type='radio']:activeを使用して、代替グラフィックを提供します

更新：2018年以降、以下を追加して複数のブラウザーベンダーをサポートできます。

input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
31
Omiod

フレッドが述べたように、色、サイズなどに関してラジオボタンをネイティブにスタイル設定する方法はありません。ただし、CSS Pseudo要素を使用して、特定のラジオボタンの詐称者を設定し、スタイルを設定できます。 JamieDが言ったことに触れ、：after Pseudo要素をどのように使用できるかについて、：beforeと：afterの両方を使用して望ましい外観を実現できます。

このアプローチの利点：

  • ラジオボタンのスタイルを設定し、コンテンツのラベルも含めます。
  • 外側の縁の色やチェックされた円を好きな色に変更します。
  • 背景色プロパティを変更したり、オプションで不透明度プロパティを使用したりして、透明な外観にします。
  • ラジオボタンのサイズを調整します。
  • 必要に応じて、CSSドロップシャドウインセットなどのさまざまなドロップシャドウプロパティを追加します。
  • この単純なCSS/HTMLトリックをBootstrap 3.3.6などのさまざまなグリッドシステムにブレンドして、残りのBootstrapコンポーネントと視覚的に一致させます。

以下の短いデモの説明：

  • 各ラジオボタンに相対的なインラインブロックを設定します
  • ネイティブのラジオボタンの意味を非表示にするには、スタイルを直接設定する方法はありません。
  • ラベルのスタイルと整列
  • ：before擬似要素でCSSコンテンツを再構築して2つのことを行います-ラジオボタンの外側の縁をスタイルし、要素が最初に表示されるように設定します（ラベルコンテンツの左側）。擬似要素の基本的な手順はこちらで確認できます- http://www.w3schools.com/css/css_pseudo_elements.asp
  • ラジオボタンがオンになっている場合、CSSコンテンツ（ラジオボタンのスタイル付きドット）を表示するラベルを要求します。

HTML

<div class="radio-item">
    <input type="radio" id="ritema" name="ritem" value="ropt1">
    <label for="ritema">Option 1</label>
</div>

<div class="radio-item">
    <input type="radio" id="ritemb" name="ritem" value="ropt2">
    <label for="ritemb">Option 2</label>
</div>

CSS

.radio-item {
  display: inline-block;
  position: relative;
  padding: 0 6px;
  margin: 10px 0 0;
}

.radio-item input[type='radio'] {
  display: none;
}

.radio-item label {
  color: #666;
  font-weight: normal;
}

.radio-item label:before {
  content: " ";
  display: inline-block;
  position: relative;
  top: 5px;
  margin: 0 5px 0 0;
  width: 20px;
  height: 20px;
  border-radius: 11px;
  border: 2px solid #004c97;
  background-color: transparent;
}

.radio-item input[type=radio]:checked + label:after {
  border-radius: 11px;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 9px;
  left: 10px;
  content: " ";
  display: block;
  background: #004c97;
}

短いデモ 動作を確認する

結論として、JavaScript、画像、またはバッテリーは必要ありません。純粋なCSS。

28
klewis

あなたはCSSのトリックで説明されているようにチェックボックスハックを使用することができます

http://css-tricks.com/the-checkbox-hack/

ラジオボタンの動作例：

http://codepen.io/Angelata/pen/Eypnq

input[type=radio]:checked ~ .check {}
input[type=radio]:checked ~ .check .inside{}

IE9 +、Firefox 3.5 +、Safari 1.3 +、Opera 6 +、Chromeなんでも動作します。

10
Amit Choukroun

2つの純粋なCSSの方法でカスタマイズされたラジオボタンを実現できます。

  1. CSS appearanceを使用して標準の外観を削除し、カスタムの外観を適用します。残念ながら、これはデスクトップのIEでは機能しませんでした（Windows PhoneのIEでは機能します）。デモ：

    input[type="radio"] {
  /* remove standard background appearance */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* create custom radiobutton appearance */
  display: inline-block;
  width: 25px;
  height: 25px;
  padding: 6px;
  /* background-color only for content */
  background-clip: content-box;
  border: 2px solid #bbbbbb;
  background-color: #e7e6e7;
  border-radius: 50%;
}

/* appearance for checked radiobutton */
input[type="radio"]:checked {
  background-color: #93e026;
}

/* optional styles, I'm using this for centering radiobuttons */
.flex {
  display: flex;
  align-items: center;
}
    <div class="flex">
  <input type="radio" name="radio" id="radio1" />
  <label for="radio1">RadioButton1</label>
</div>
<div class="flex">
  <input type="radio" name="radio" id="radio2" />
  <label for="radio2">RadioButton2</label>
</div>
<div class="flex">
  <input type="radio" name="radio" id="radio3" />
  <label for="radio3">RadioButton3</label>
</div>

  2. ラジオボタンを非表示にし、カスタムラジオボタンの外観をlabelの擬似セレクターに設定します。ちなみに、ここでは絶対配置の必要はありません（ほとんどのデモで絶対配置を参照）。デモ：

    *,
*:before,
*:after {
  box-sizing: border-box;
}

input[type="radio"] {
  display: none;
}

input[type="radio"]+label:before {
  content: "";
  /* create custom radiobutton appearance */
  display: inline-block;
  width: 25px;
  height: 25px;
  padding: 6px;
  margin-right: 3px;
  /* background-color only for content */
  background-clip: content-box;
  border: 2px solid #bbbbbb;
  background-color: #e7e6e7;
  border-radius: 50%;
}

/* appearance for checked radiobutton */
input[type="radio"]:checked + label:before {
  background-color: #93e026;
}

/* optional styles, I'm using this for centering radiobuttons */
label {
  display: flex;
  align-items: center;
}
    <input type="radio" name="radio" id="radio1" />
<label for="radio1">RadioButton1</label>
<input type="radio" name="radio" id="radio2" />
<label for="radio2">RadioButton2</label>
<input type="radio" name="radio" id="radio3" />
<label for="radio3">RadioButton3</label>
8
Vadim Ovchinnikov

あなたのためのシンプルなクロスブラウザカスタムラジオボタンの例

.checkbox input{
    display: none;
}
.checkbox input:checked + label{
    color: #16B67F;
}
.checkbox input:checked + label i{
    background-image: url('http://kuzroman.com/images/jswiddler/radio-button.svg');
}
.checkbox label i{
    width: 15px;
    height: 15px;
    display: inline-block;
    background: #fff url('http://kuzroman.com/images/jswiddler/circle.svg') no-repeat 50%;
    background-size: 12px;
    position: relative;
    top: 1px;
    left: -2px;
}
<div class="checkbox">
  <input type="radio" name="sort" value="popularity" id="sort1">
  <label for="sort1">
        <i></i>
        <span>first</span>
    </label>

  <input type="radio" name="sort" value="price" id="sort2">
  <label for="sort2">
        <i></i>
        <span>second</span>
    </label>
</div>

https://jsfiddle.net/kuzroman/ae1b34ay/

5
kuzroman

余分な要素を作成するには、：after、：beforeを使用できます（したがって、HTMLをそれほど変更する必要はありません）。次に、ラジオボタンとチェックボックスに：checkedを使用できます。他にも使用できる疑似要素がいくつかあります（：hoverなど）。これらを組み合わせて使用​​すると、かなりクールなカスタムフォームを作成できます。 チェックしてください

4
GkDreamz

このCSSを移行してみてください：

enter image description here

デモ

$DarkBrown: #292321;

$Orange: #CC3300;

div {
  margin:0 0 0.75em 0;
}

input[type="radio"] {
    display:none;
}
input[type="radio"] + label {
    color: $DarkBrown;
    font-family:Arial, sans-serif;
    font-size:14px;
}
input[type="radio"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    cursor:pointer;
    -moz-border-radius:  50%;
    border-radius:  50%;
}

input[type="radio"] + label span {
     background-color:$DarkBrown;
}

input[type="radio"]:checked + label span{
     background-color:$Orange;
}

input[type="radio"] + label span,
input[type="radio"]:checked + label span {
  -webkit-transition:background-color 0.4s linear;
  -o-transition:background-color 0.4s linear;
  -moz-transition:background-color 0.4s linear;
  transition:background-color 0.4s linear;
}

HTML：

<div>
  <input type="radio" id="radio01" name="radio" />
  <label for="radio01"><span></span>Radio Button 1</label>
</div>

<div>
 <input type="radio" id="radio02" name="radio" />
 <label for="radio02"><span></span>Radio Button 2</label>
</div>
2
Ahmad Aghazadeh

他の人が言ったように、すべてのブラウザでこれを達成する方法はないので、クロスブラウザを行う最善の方法は控えめにjavascriptを使用することです。基本的に、ラジオボタンをリンクに変更する必要があります（CSSで完全にカスタマイズ可能）。リンクをクリックするたびに、関連するラジオボックスにバインドされ、彼の状態とその他すべての状態が切り替わります。

1
fcalderan

また、javascriptも必要になります。 here を参照してください。

1
kgiannakakis

これは、ネイティブCSSでは不可能です。背景画像といくつかのjavascriptトリックを使用する必要があります。

1
joni

ラジオボタンをスタイルラベルにバインドすると役立つ場合があります。詳細は この回答 で。

0
snowerest

それを行う巧妙な方法は、たとえば50pxの高さと幅の別のdivを作成し、次に50pxの半径をラジオボタンの上に置くことです...

0
Zeusox