[解決済み] チェックボックス CSS :checked styling

2022-03-05 22:11:47

質問

私のCSSのどこに問題があるのかを理解しようとしているのですが、本当に何が問題なのか全く分かりません。

基本的に、デフォルトのチェックボックスのスタイルをCSSで整えています。チェックボックスにチェックを入れるまではうまくいくのですが。

私のコードの背後にあるアイデアは、チェックボックスをチェックしたときに、サイズを大きくし、背景色を赤に変更することです。さらに、チェックボックスのチェックを外すまで、そのスタイルを維持することです。

どこに問題があるのか、心当たりはありますか？私の考えでは、問題は "input[type="checkbox"]:checked .check-box-effect {" が始まるところだと思います。

以下のコードをご覧ください。

label {
  display: inline-block;
  color: #fff;
  cursor: pointer;
  position: relative;
}

label .check-box-effect {
  display: inline-block;
  position: relative;
  background-color: transparent;
  width: 25px;
  height: 25px;
  border: 2px solid #dcdcdc;
  border-radius: 10%;
}

label .check-box-effect:before {
  content: "";
  width: 0px;
  height: 2px;
  border-radius: 2px;
  background: #626262;
  position: absolute;
  transform: rotate(45deg);
  top: 13px;
  left: 9px;
  transition: width 50ms ease 50ms;
  transform-origin: 0% 0%;
}

label .check-box-effect:after {
  content: "";
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: #626262;
  position: absolute;
  transform: rotate(305deg);
  top: 16px;
  left: 10px;
  transition: width 50ms ease;
  transform-origin: 0% 0%;
}

label:hover .check-box-effect:before {
  width: 5px;
  transition: width 100ms ease;
}

label:hover .check-box-effect:after {
  width: 10px;
  transition: width 150ms ease 100ms;
}

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

input[type="checkbox"]:checked .check-box-effect {
  background-color: red !important;
  transform: scale(1.25);
}

input[type="checkbox"]:checked .check-box-effect:after {
  width: 10px;
  background: #333;
  transition: width 150ms ease 100ms;
}

input[type="checkbox"]:checked .check-box-effect:before {
  width: 5px;
  background: #333;
  transition: width 150ms ease 100ms;
}

input[type="checkbox"]:checked:hover .check-box-effect {
  background-color: #dcdcdc;
  transform: scale(1.25);
}

input[type="checkbox"]:checked:hover .check-box-effect:after {
  width: 10px;
  background: #333;
  transition: width 150ms ease 100ms;
}

input[type="checkbox"]:checked:hover .check-box-effect:before {
  width: 5px;
  background: #333;
  transition: width 150ms ease 100ms;
}

<label>     
          <input type="checkbox" id="chkProdTomove"  />
          <span class="check-box-effect"></span>
        </label>

解決方法は？

チェックしたセレクタをすべてこれに変更する必要があります。

input[type="checkbox"]:checked + .check-box-effect:before

label {
  display: inline-block;
  color: #fff;
  cursor: pointer;
  position: relative;
}

label .check-box-effect {
  display: inline-block;
  position: relative;
  background-color: transparent;
  width: 25px;
  height: 25px;
  border: 2px solid #dcdcdc;
  border-radius: 10%;
}

label .check-box-effect:before {
  content: "";
  width: 0px;
  height: 2px;
  border-radius: 2px;
  background: #626262;
  position: absolute;
  transform: rotate(45deg);
  top: 13px;
  left: 9px;
  transition: width 50ms ease 50ms;
  transform-origin: 0% 0%;
}

label .check-box-effect:after {
  content: "";
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: #626262;
  position: absolute;
  transform: rotate(305deg);
  top: 16px;
  left: 10px;
  transition: width 50ms ease;
  transform-origin: 0% 0%;
}

label:hover .check-box-effect:before {
  width: 5px;
  transition: width 100ms ease;
}

label:hover .check-box-effect:after {
  width: 10px;
  transition: width 150ms ease 100ms;
}

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

input[type="checkbox"]:checked + .check-box-effect {
  background-color: red !important;
  transform: scale(1.25);
}

input[type="checkbox"]:checked + .check-box-effect:after {
  width: 10px;
  background: #333;
  transition: width 150ms ease 100ms;
}

input[type="checkbox"]:checked + .check-box-effect:before {
  width: 5px;
  background: #333;
  transition: width 150ms ease 100ms;
}

input[type="checkbox"]:checked:hover + .check-box-effect {
  background-color: #dcdcdc;
  transform: scale(1.25);
}

input[type="checkbox"]:checked:hover + .check-box-effect:after {
  width: 10px;
  background: #333;
  transition: width 150ms ease 100ms;
}

input[type="checkbox"]:checked:hover + .check-box-effect:before {
  width: 5px;
  background: #333;
  transition: width 150ms ease 100ms;
}

<label>     
          <input type="checkbox" id="chkProdTomove"  />
          <span class="check-box-effect"></span>
        </label>

[解決済み] チェックボックス CSS :checked styling

質問

解決方法は？

関連

[解決済み] 高さを固定したBootstrapパネルボディの作り方

[解決済み] HTMLファイルへのリンクは可能ですか？

[解決済み] フッターの内容が重なっているのを修正するには？

[解決済み] jQueryでチェックボックスに "checked "を設定する

[解決済み] CSSの親セレクタはありますか？

[解決済み] CSSでcellpaddingとcellspacingを設定する？

[解決済み] CSSでテキストや画像の背景を透明にするには？

[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか？

[解決済み】チェックボックスがチェックされているかどうかをjQueryで確認する。

[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。

最新

nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)

htmlページでギリシャ文字を使うには

ピュアhtml+cssでの要素読み込み効果

純粋なhtml + cssで五輪を実現するサンプルコード

ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード

タイピング効果を実現するピュアhtml+css

htmlの選択ボックスのプレースホルダー作成に関する質問

html css3 伸縮しない画像表示効果

トップナビゲーションバーメニュー作成用HTML+CSS

html+css 実装サイバーパンク風ボタン

おすすめ

[解決済み】位置固定が機能しない

[解決済み】iframeを水平方向にセンタリングする方法は？

[解決済み】画像のURLで禁断の403を出す

js プログラミング共通のエラーです。Uncaught TypeError。XXXは関数ソリューションではありません

[解決済み] ボディの背景色が表示されない？

[解決済み] 文字列が部分文字列で終わっているかどうかをXPathでテストする？

[解決済み] ChromeのデベロッパーツールでHTML Bodyにcz-shortcut-listen="true "が表示される？

[解決済み] SRCとHREFの違い

[解決済み] HTML5 Canvas 要素でカスタムフォントを使用するにはどうすればよいですか？

[解決済み] Font Awesome アイコンをプレースホルダーで使用する