[ラベル]　[チェックボックス]　のようにラベルが先にきた場合にcheckedの時のラベルの指定方法

**[チェックボックス] [ラベル] の並びだと以下のCSS、htmlで対応できました。
同じ動きを[ラベル] [チェックボックス] だとどういう方法になるでしょうか。

おそらく、:checkedの時のlabelの指定方法さえわかれば解決すると思うのですが。。。
jQueryという方法を取らずに解決したいです。**

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

.demo01 input[type="checkbox"] + label {
display: block;
cursor: pointer;
margin: 5px;
}

.demo01 input[type="checkbox"] + label::before {
width: 16px;
height: 16px;
line-height: 15px;
font-size: 12px;
display: inline-block;
vertical-align: middle;
text-align: center;
content: "\2713";
color: transparent;
padding: 0;
border-radius: 1px;
border: 2px solid #C8C9CA ;
background: #fff;
margin: -2px 10px 0 0;
-webkit-transition: .1s;
transition: .1s;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.demo01 input[type="checkbox"]:checked + label::before {
font-size: 20px;
background: #fff !important;
border-color: #C8C9CA !important;
color: #E95513 !important;
line-height: 5px;
}

<div class="demo01">
    <input type="checkbox" id="demo001"><label for="demo001">hogehoge</label>
</div>

行動規範の内容に同意します

回答1件

ベストアンサー

html
1<!DOCTYPE HTML>
2<html lang="en-US">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6		<style type="text/css">
7			input[type="checkbox"][checked] + label {
8				font-size: 20px;
9				background: #fff !important;
10				border-color: #C8C9CA !important;
11				color: #E95513 !important;
12				line-height: 5px;
13			}
14		</style>
15	</head>
16	<body>
17		<div class="demo01">
18			<input type="checkbox" id="demo001" /><label for="demo001">hogehoge</label>
19		</div>
20	</body>
21</html>
22}

こうってみましたけど、ダメみたいですね。JavaScript 使う以外に方法はなさそうです。

投稿2015/07/31 02:54

編集2015/07/31 04:13

退会済みユーザー

総合スコア0

ngyuki

2015/07/31 04:42 編集

本題とはあんまり関係ありませんが・・・ [checked] はあくまでも「属性」セレクタであって、ユーザーがチェックボックスをポチポチしても「属性」が変わるわけではないので（getAttribute とかの）、チェックボックスの on/off に連動してスタイルを変える用途には使えないと思います。そのために :checked のような擬似セレクタがあります。