单选按钮在 Firefox 中有效，但在 Chrome 中不可点击

Question

我已经创建了这些单选按钮。

它们在 Firefox 中完美运行，但在 Chrome 中不可点击。

代码如下：

<input type="radio" name="rating" value="1" id="radio_btn">1</input>
<input type="radio" name="rating" value="2" id="radio_btn">2</input>
<input type="radio" name="rating" value="3" id="radio_btn">3</input>
<input type="radio" name="rating" value="4" id="radio_btn">4</input>
<input type="radio" name="rating" value="5" id="radio_btn">5</input>
<input type="hidden" name="item_id" value="1" /><br/>
<input style = "margin-left:88px;margin-top:10px;" type="submit" id="sub_rating" value="Vote" />

这是 CSS：

#radio_btn {
  margin-left : 3%;
  margin-right : 3%;
}

Answer 1

如上所述，页面上的所有 ID 都必须是唯一的。 最好也使用一个类来应用样式。 你应该这样做：

<input type="radio" name="rating" value="1" id="radio_btn1" class="radio_btn">1</input>
<input type="radio" name="rating" value="2" id="radio_btn2" class="radio_btn">2</input>
<input type="radio" name="rating" value="3" id="radio_btn3" class="radio_btn">3</input>
<input type="radio" name="rating" value="4" id="radio_btn4" class="radio_btn">4</input>
<input type="radio" name="rating" value="5" id="radio_btn5" class="radio_btn">5</input>

您还需要将您的 CSS 规则更改为：

.radio_btn {
    margin-left : 3%;
    margin-right : 3%;
}

Answer 2

您必须首先删除</input>，然后更改id，它们不能相同，然后您删除提交按钮的样式。 对于 css，您使用 <form> id 像这样编写 css 代码

<form id="youID">
<input type="radio" name="rating" value="1" id="radio_btn_1">1
<input type="radio" name="rating" value="2" id="radio_btn_2">2
<input type="radio" name="rating" value="3" id="radio_btn_3">3
<input type="radio" name="rating" value="4" id="radio_btn_4">4
<input type="radio" name="rating" value="5" id="radio_btn_5">5
<input type="hidden" name="item_id" value="1" /><br/>
<input type="submit" id="sub_rating" value="Vote" />
</form> 

CSS

#youID input[type="radio"] {
margin-left : 3%;
margin-right : 3%;
}
#youID input[type="submit"] {
    margin-left:88px;
    margin-top:10px;
}