html 复选框 不能选,HTML复选框在某些情况下不可点击

我正在创建一个使用复选框作为输入的扰流板。HTML复选框在某些情况下不可点击

问题是只有第一行是完全可点击的。

其他复选框只能在某些地方点击。

图片

的其他怪异，当第一扰流板被选中，这是。 图片 所有地方都可以完全点击。

HTML/PHP

Appartementen

foreach($hotels as $key => $hotel)

{

?>

}

?>

Bed and Breakfast

foreach($hotels as $key => $hotel)

{

?>

}

?>

CSS

input[id^="spoiler"]{

display: none;

}

input[id^="spoiler"] + label {

display: block;

width: 1000px;

margin: 0 auto;

padding: 5px 20px;

background: #22CF00;

color: #fff;

text-align: center;

font-size: 20px;

cursor: pointer;

transition: all .3s;

}

input[id^="spoiler"]:checked + label {

color: black;

background: #0EC100;

}

input[id^="spoiler"] ~ .spoiler {

height: 0;

overflow: hidden;

opacity: 0;

background: #ffffff;

border: 1px solid #ccc;

}

input[id^="spoiler"]:checked + label + .spoiler{

height: auto;

opacity: 1;

可以采取什么问题吗？

2017-09-01

Ruitjes