Question

给定代码适用于firefox，但不适用于任何其他浏览器。

使用单选按钮

我是不是错了

我只想要3个按钮，但是当用户点击其突出显示的选项

时，我已经设置了样式

这是我的代码：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title></title>
</head>
<style>
.radio > input[type=radio]{
  display:none;
  visibility:hidden;
}
input[type=radio] + label{
  cursor:pointer;
}
input[type=radio]:checked + label{
  background-color:green;
}

.but1{
    background-color:#009;
    color:#FFF;
    border:none;
    border-radius:15px;
    width:200px;
    height:50px;
    font-size:18px;
    font-weight:bold;
    border-radius:15px;
    text-align:center;
    padding:8px;
    font-family:Verdana, Geneva, sans-serif;
    float:left;
    margin-left:10px;
}
</style>
</head>

<body>
<form action="Untitled2.php" method="post">
<label class="radio" for="fb1">
    <input id="fb1" type="radio" name="time" value="all day" checked />
    <label class="but1">Available<br>All day</label>
  </label>

  <label class="radio" for="fb2">
    <input id="fb2" type="radio" name="time" value="between 8-12"/>
    <label class="but1">Between<br>8am - 12am</label>
  </label>

  <label class="radio" for="fb3">
     <input id="fb3" type="radio" name="time" value="between 12-4" />
    <label class="but1">Between<br>12pm - 4pm</label>
  </label>

<input name="submit" type="submit" />
</form>
</body>
</html>

我该怎么做？

Answer 1

您的外部label是多余的，您可以这样做：

<input id="fb1" type="radio" name="time" value="all day" checked />
<label class="but1" for="fb1">Available<br>All day</label>

<input id="fb2" type="radio" name="time" value="between 8-12"/>
<label class="but1" for="fb2">Between<br>8am - 12am</label>

<input id="fb3" type="radio" name="time" value="between 12-4" />
<label class="but1" for="fb3">Between<br>12pm - 4pm</label>

用于隐藏单选按钮的css也是错误的，应该只是：

input[type=radio]{
  display:none;
}

<强> Fiddle

Answer 2

已更新，请检查网址

如你所提到的那样使用jQuery http://jsfiddle.net/VE9Tf/4/

<label class="radio" for="fb1">
    <input id="fb1" type="radio" name="time" value="all day" checked />
    <span class="but1 active">Available<br>All day</span>
  </label>

  <label class="radio" for="fb2">
    <input id="fb2"  type="radio" name="time" value="between 8-12"/>
    <span class="but1">Between<br>8am - 12am</span>
  </label>

  <label class="radio" for="fb3">
    <input id="fb3" type="radio" name="time" value="between 12-4" />
    <span class="but1">Between<br>12pm - 4pm</span>
  </label>

firefox中的单选按钮代码确定，但不能在其他浏览器中使用

2 个答案: