The given code works in firefox, but not in any other browser.
Am i going about it wrong by using radio button
I just want 3 buttons but styled as i have already, when the user clicks an option its highlighted
Here is my Code :
<!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>
How can i do this ?
