CSSを使ってラジオボタンの色を変更する方法（コード添付）

この記事の内容はCSSを使ってラジオボタンの色を変更する方法（コード付き）ですので、困っている方は参考にしていただければ幸いです。

営業マンに「このラジオボタンの色を変更できますか！テーマカラーに合わせてください！」と尋ねられたとき、ネイティブがラジオボタンの変更をサポートしていないという事実に悩まされたことはありませんか？色を変更し、最終的には自分で間に合わせの色を作成する必要がありました。 input[type=radio] を放棄して新しいものを開発すると、選択済み、未選択、使用不可、その他の状態をシミュレートするのが非常に面倒であることがわかります。実際、ラジオ ボタン グループが関係する場合はさらに面倒です。 label、::before、:checked、tabindex を使用でき、少量の JavaScript スクリプトを追加することで、よりリッチなスタイルの「ネイティブ」ラジオ ボタンをシミュレートできます。一緒に試してみましょう！

ラジオ ボタン ボックスについて理解する

私たちの目標はラジオ ボタン ボックスの色を変更することであり、その他の外観の機能や動作は元のラジオ ボタン ボックスと一致しています。まず、ラジオ ボタンの本来の外観の特徴と動作を理解する必要があります。
1.外観の特徴
1.1.通常のスタイル

margin: 3px 3px 0px 5px;
border: none 0;
padding: 0;
box-sizing: border-box;
display: inline-block;
line-height: normal;
position: static;

注: レイアウトの特徴が元の外観と一致していることを確認する必要があります。そうでない場合は、カスタム無線に置き換えられる可能性が高くなります。最終的には、全体のレイアウトを調整するために他の要素のレイアウト特性を調整する必要が生じ、変更の範囲が拡大します。

1.2. フォーカスを取得するスタイル

outline-offset: 0px;
outline: -webkit-focu-ring-color auto 5px;

注: ここでフォーカスを取得するスタイルは、ラジオ ボタンがあるにもかかわらず、キーボードの Tab キーによってのみ有効になります。フォーカスを取得すると、上記のスタイルは機能しません。

1.3. 無効なスタイルに設定します

color: rgb(84, 84, 84);

2. 動作特性
ラジオ ボタンの動作特性は明らかに選択されているかどうか、および選択状態の変更イベントです。 change イベントを外部に提供し続ける必要があります。
キーボードの Tab キーを使用してラジオ ボタンにフォーカスを置き、Space キーを押すと、ラジオ ボタンが選択されることにも注意してください。

上記を理解したら、コーディングを開始できます。

#ナンセンスな話やコーディングはやめてください

##上の図では、左側がネイティブ ラジオ ボタンです。 、右側にはカスタムラジオボタンがあります。スタイルは上から下に、

unselected、selected、focused、disabled です。

CSS 部分

label.radio {
  /* 保证布局特性保持一致 */
  margin: 3px 3px 0px 5px;
  display: inline-block;
  box-sizing: border-box;

  width: 12px;
  height: 12px;
}

.radio__appearance{
  display: block; /* 设置为block则不受vertical-align影响，从而不会意外影响到.radio的linebox高度 */
  position: relative;
  box-shadow: 0 0 0 1px tomato; /* box-shadow不像border那样会影响盒子的框高 */
  border-radius: 50%;
  height: 90%;
  width: 90%;
  text-align: center;
}
label.radio [type=radio] + .radio__appearance::before{
  content: "";
  display: block;
  border-radius: 50%;
  width: 85%;
  height: 85%;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  transition: background .3s;
}
label.radio [type=radio]:checked + .radio__appearance::before{
  background: tomato;
}
label.radio [type=radio][disabled] + .radio__appearance{
  opacity: .5;
}
label.radio:focus{
  outline-offset: 0px;
  outline: #999 auto 5px;
}
/* 通过鼠标单击获得焦点时，outline效果不生效 */
label.radio.clicked{
  outline: none 0;
}
/* 自定义单选框的行为主要是基于原生单选框的，因此先将原生单选框隐藏 */
label.radio input {
  display: none;
}

HTML 部分

<!-- 未选中状态 -->
<label>
  <input>
  <i></i>
</label>

<br>

<!-- 选中状态 -->
<label>
  <input>
  <i></i>
</label>

<br>

<!-- disabled状态 -->
<label>
  <input>
  <i></i>
</label>

JavaScript 部分

var radios = document.querySelectorAll(".radio")
radios.forEach(radio => {
  // 模拟鼠标点击后:focus样式无效
  radio.addEventListener("mousedown", e => {
    var tar = e.currentTarget
    tar.classList.add("clicked")
    var fp = setInterval(function(){
      if (document.activeElement != tar){
        tar.classList.remove("clicked")
        clearInterval(fp)
      }
    }, 400)
  })
  // 模拟通过键盘获得焦点后，按`Space`键执行选中操作
  radio.addEventListener("keydown", e => {
    if (e.keyCode === 32){
      e.target.click()
    }
  })
})

この実装では、次の 3 つの点に注意する必要があります:

1 Pass label はマウス クリック イベントを関連する input[type=radio] に渡すため、ラジオ ボタンを安全に非表示にして、ラジオ ボタン自体の特性を利用できます。ただし、ラベル コントロール自体の制限により、デフォルトではフォーカス可能な要素ではないため、tabindex 機能を追加したとしても、キーボードのキー イベントをラジオ ボタンに転送することはできません。実装するには手書き JS が必要です。

2. tabindex が 0 以上の場合、その要素がフォーカスを取得できることを意味し、その要素の位置に従ってフォーカスを取得する順序が配置されることを意味します。要素が 0 より大きい場合、要素が小さいほど最初にフォーカスが取得されることを意味します。ラインボックスの高さに影響します。カスタムラジオボタン内の要素がインラインブロックの場合、縦揃えの設定を少しでも不注意にすると、内部要素が配置されている行ボックスが盛り上がってしまい、カスタムラジオボタンが配置されている行ボックスの高さが高くなってしまいます。大きくなる。そこで、ここでは内部要素の表示をブロック化することで直接垂直配置を無効にし、制御性を向上させる方法を採用します。

opacity:0

によって達成] 選択ボックスの実装ですが、スペース キーを押して選択する動作特性を実装するには手書きの JS が必要です。手間を省く別の方法はありますか?ユーザーにネイティブのラジオ ボタンを表示させたくないだけなので、それを opacity:0 に設定することはできますか? ！

CSS パート

.radio {
  /* 保证布局特性保持一致 */
  margin: 3px 3px 0px 5px;
  display: inline-block;
  box-sizing: border-box;

  width: 13px;
  height: 13px;
}
/* 自定义单选框的行为主要是基于原生单选框的，因此先将原生单选框透明，且沾满整个父元素 */
.radio input {
  opacity: 0;
  position: absolute;
  z-index: 1; /* 必须覆盖在.radio__appearance上才能响应鼠标事件 */
  width: 100%;
  height: 100%;
}
.radio__container-box{
  position: relative;
  width: 100%;
  height: 100%;
}
.radio__appearance{
  display: block; /* 设置为block则不受vertical-align影响，从而不会意外影响到.radio的linebox高度 */
  position: relative;
  box-shadow: 0 0 0 1px tomato; /* box-shadow不像border那样会影响盒子的框高 */
  border-radius: 50%;
  height: 90%;
  width: 90%;
  text-align: center;
}
.radio [type=radio] + .radio__appearance::before{
  content: "";
  display: block;
  border-radius: 50%;
  width: 85%;
  height: 85%;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  transition: background .3s;
}
.radio [type=radio]:checked + .radio__appearance::before{
  background: tomato;
}
.radio [type=radio][disabled] + .radio__appearance{
  opacity: .5;
}
.radio:focus-within .radio__appearance{
  outline-offset: 0px;
  outline: #999 auto 5px;
}
/* 通过鼠标单击获得焦点时，outline效果不生效 */
.radio.clicked .radio_appearance{
  outline: none 0;
}

HTML パート

<!-- 未选中状态 -->
<span>
  <span>
    <input>
    <i></i>
  </span>
</span>

<br>

<!-- 选中状态 -->
<span>
  <span>
    <input>
    <i></i>
  </span>
</span>

<br>

<!-- disabled状态 -->
<span>
  <span>
    <input>
    <i></i>
  </span>
</span>

JavaScript パート

var radios = document.querySelectorAll(".radio")
radios.forEach(radio => {
  // 模拟鼠标点击后:focus样式无效
  radio.addEventListener("mousedown", e => {
    var tar = e.currentTarget
    tar.classList.add("clicked")
    var fp = setInterval(function(){
      if (!tar.contains(document.activeElement){
        tar.classList.remove("clicked")
        clearInterval(fp)
      }
    }, 400)
  })
})

概要

チェック ボックスを少し変更できます。さらに、VUE、React、その他のフレームワークを通じてわずかにカプセル化して、より使いやすいシンプルな API を提供できます。

以上がCSSを使ってラジオボタンの色を変更する方法（コード添付）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。