單選按鈕代碼在Firefox中可以使用，但不能在其他瀏覽器中使用

給定的代碼在firefox中可用，但不能在任何其他瀏覽器中使用。單選按鈕代碼在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>

我該怎麼做？

來源

2014-03-19 user3435975

請jsfiddle.net – ShibinRagh

http://jsfiddle.net/VE9Tf/ – user3435975

瀏覽器這麼想的支持這種方式，請使用jQuery – ShibinRagh

你的外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

來源

2014-03-19 05:07:45

更新時間，請查看網址

使用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>

來源

2014-03-19 05:12:03 ShibinRagh

它應該在所有瀏覽器 – ShibinRagh

不工作，在Firefox和Safari瀏覽器工作 – user3435975

@ShibinRagh Umm你的代碼不工作可能是因爲複選框沒有得到檢查，我編輯你的代碼[這裏]（http://jsfiddle.net/VE9Tf/3/） –

單選按鈕代碼在Firefox中可以使用，但不能在其他瀏覽器中使用

回答

相關問題