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;
}

单选按钮在Firefox中工作但在Chrome中无法点击

2 个答案: