Question

我正在尝试制作一个很酷的复选框。我有一个复选框，然后是隐藏的输入，然后是标签。我正在尝试在选中复选框时更改标签的字体粗细。

    <html>
    <head>
	<style type="text/css">
			input[type="checkbox"]:checked + input[type="hidden"] + label{
				font-weight:bold;
			}
	</style>
    </head>

    <body>
	<div>
		<input type="checkbox" id="1"/>
		<input type="hidden"/>
		<label for="1">My Label</label>
	<div>
    </body>

    </html>

但是我无法在Chrome上运行它。但是如果我在jsfiddle上尝试使用chrome就行了!!!!!

Here is the Fiddle

有什么想法吗？

Answer 1

将您的css更改为以下内容并且工作正常

input[type="checkbox"]:checked + input + label{
                font-weight:bold;
}

Answer 2

你设定了微小的改变而不是它的工作。

<style type="text/css">
        input[type="checkbox"]:checked + input[type="hidden"] ~ label{
            font-weight:bold;
        }
</style>

CSS无法在Chrome上运行

Here is the Fiddle

2 个答案: