CSSを使ってラジオボタンの色を変更する方法（コード添付）-CSSチュートリアル-php.cn

この記事の内容は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 キーを押すと、ラジオボタンが選択されることにも注意してください。

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

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

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

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

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 サイトの他の関連記事を参照してください。