【至急お助け！】チェックボックスにチェックで背景色変更が難しすぎて困っています！

解決済

質問者：yuyukina
質問日時：2021/04/25 15:39
回答数：4件

かれこれもう2時間くらい色々と構っているのですが、全く解決ができないので質問をさせてください。

現在HTMLとCSSでオーム部品のチェックボックスに、チェックが入った際に、チェックボックスの背景色？（四角の中の色）を変更させたいのですが、これがとても難しく色ついてくれません。
少し調べたのですが、結構面倒そうなことは書いてあったのですが、試しても再現できません。
お助けください。

最初に思ったのは、単純に

input[type="checkbox"]{
background:red;
}

とかで初期値の色を変えようとしても変わらず…。

input[type="checkbox"]:checked {
background-color: red;
}

で指定してもチェック後に背景が変わる気配が全くありません。

その他、サイズやpaddingの指定でチェックボックスの見た目なども試してみたのですが、一切変わりません。marginで余白が定義できるくらいです。

チェックボックスの定義には何か特別なルールなどがあるのでしょうか？
全く変更ができなくて困っています。
お詳しい方、設定方法についてアドバイスをお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： fujillin
回答日時：2021/04/25 23:03

No2です

＞何だか難しいですね
同じ方法なんですけれどね。
簡単にしたいなら、画像を利用するのが簡単かも。

考え方は変わりませんけれど、「チェック時の画像」(=checked.png)を用意しておいて、背景画像にする例です。

※ 色を変えるだけでいいなら、background-colorでもよいですけれど、チェックマークがつかないので…

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style>
input.hoge{
display: none;
}
/* label 通常表示 */
input.hoge+label {
display: inline-block;
width: 1em; height: 1em;
border: 1px solid black;
}
/* label チェック時 */
input.hoge:checked+label {
background-image: url("./checked.png")
}
</style>
</head>
<body>
<form>
<input class="hoge" id="inp1" type="checkbox" />
<label for="inp1"></label>
</form>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

何度もすみません、有難うございます！
前回頂いたものと今回の画像版で、それぞれ理解ができました。
画像でチェックを作るか、
transform: rotate(-45deg) translate(0, .15em);　でチェック風のデザインに仕上げるか…。

いずれにしても、直接簡単には操作ができないのですね…。
もっとカスタマイズしやすく、かつ全ブラウザで統一できればいいですね！
有難うございました！

通報する

お礼日時：2021/04/26 17:40

No.3

回答者： naokita
回答日時：2021/04/25 17:14

inputやselectは、昔から多くのブラウザに依存していて、

AndoroidやiPhoneで見るとPCブラウザとは違いますし、CSSで指定しても、ブラウザによっては、効かないです・・・
ただ、
inputはlabelで連動できるので、

input { position: absolute; opacity: 0;}
このように、消しちゃってｗ　labelで適用します。

<input id="t01" type="checkbox" name="tabs">
<label for="t01">□</label>
のように、
□を擬似的に画像化し（チェック済み画像も用意）
labelで展開するとお望みの事が出来ると思います。
良くlabelで利用するのは、ハンバーガーメニューのアイコン「三」→「×」→「三」→「×」のように、切り替えの仕様で応用できます。

- 0
- 件

通報する

この回答へのお礼

有難うございます。
何だか難しいですね、色々と調べてみたのですが、やはり簡単では無いような記述が多々見受けられました。
できるかわかりませんが、色々と試してみます。
有難うございます。㎜

通報する

お礼日時：2021/04/25 22:03

参考程度に

No.2

回答者： fujillin
回答日時：2021/04/25 17:04

No1です。

input要素を非表示にして、表示は（操作しやすい）labelで代用する簡単な例を作成してみました。
（見えているのはlabel要素です）
ご参考までに。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style>
input.hoge{
display: none;
}
/* label 通常表示 */
input.hoge+label {
display: inline-block;
width: 1em; height: 1em;
border: 1px solid black;
}
/* label チェック時 */
input.hoge:checked+label {
background-color: red;
}
/* チェックマーク */
input.hoge:checked+label::after {
content: "";
display: block;
width: 0.6em; height: 0.4em;
border: 3px solid black;
border-width: 0 0 3px 3px;
transform: rotate(-45deg) translate(0, .15em);
}
</style>

</head>
<body>
<form>
<input class="hoge" id="inp1" type="checkbox" /><label for="inp1"></label>
</form>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

すみません、ソース感謝いたします。
試してみたいと思います。><

通報する

お礼日時：2021/04/25 22:02

参考程度に

No.1

回答者： fujillin
回答日時：2021/04/25 16:23

こんにちは

＞チェックボックスの定義には何か特別なルールなどがあるのでしょうか？
チェックボックスに限らず、多くのform内要素はOSの制御を利用している部分が多いようです。
https://developer.mozilla.org/ja/docs/Learn/Form …

このため、ご質問のような事象になっていると考えられます。
対象要素に
　appearance: none;
を設定することでこれらの適用を外すことはできますが、その代わりに、全ての設定を明示的に行うことが必要となります。