|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<title>Radio Button Test</title> |
|
<!-- Css Credit: https://github.com/necolas/css3-github-buttons/blob/master/gh-buttons.css --> |
|
<style type="text/css"> |
|
|
|
.radio-toolbar input[type="radio"] { |
|
display:none; |
|
} |
|
|
|
.radio-toolbar label { |
|
position: relative; |
|
overflow: visible; |
|
display: inline-block; |
|
padding: 0.5em 1em; |
|
border: 1px solid #d4d4d4; |
|
margin: 0; |
|
text-decoration: none; |
|
text-align: center; |
|
text-shadow: 1px 1px 0 #fff; |
|
font:11px/normal sans-serif; |
|
color: #333; |
|
white-space: nowrap; |
|
cursor: pointer; |
|
outline: none; |
|
background-color: #ececec; |
|
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec)); |
|
background-image: -moz-linear-gradient(#f4f4f4, #ececec); |
|
background-image: -ms-linear-gradient(#f4f4f4, #ececec); |
|
background-image: -o-linear-gradient(#f4f4f4, #ececec); |
|
background-image: linear-gradient(#f4f4f4, #ececec); |
|
-moz-background-clip: padding; /* for Firefox 3.6 */ |
|
background-clip: padding-box; |
|
border-radius: 0.2em; |
|
/* IE hacks */ |
|
zoom: 1; |
|
*display: inline; |
|
} |
|
|
|
.radio-toolbar input[type="radio"]:checked + label, |
|
.radio-toolbar input[type="radio"]:checked + label:hover { |
|
border-color: #3072b3; |
|
border-bottom-color: #2a65a0; |
|
text-decoration: none; |
|
text-shadow: -1px -1px 0 rgba(0,0,0,0.3); |
|
color: #fff; |
|
background-color: #3c8dde; |
|
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#599bdc), to(#3072b3)); |
|
background-image: -moz-linear-gradient(#599bdc, #3072b3); |
|
background-image: -o-linear-gradient(#599bdc, #3072b3); |
|
background-image: linear-gradient(#599bdc, #3072b3); |
|
} |
|
.radio-toolbar input[type="radio"] + label:hover { |
|
border-color: #2a65a0; |
|
border-bottom-color: #3884cd; |
|
background-color: #3072b3; |
|
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3072b3), to(#599bdc)); |
|
background-image: -moz-linear-gradient(#3072b3, #599bdc); |
|
background-image: -ms-linear-gradient(#3072b3, #599bdc); |
|
background-image: -o-linear-gradient(#3072b3, #599bdc); |
|
background-image: linear-gradient(#3072b3, #599bdc); |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<!-- Html Credit: http://stackoverflow.com/a/5524065/1695680 --> |
|
<div class="radio-toolbar"> |
|
<input type="radio" name="tabs" value="1" id="radio1" checked /> |
|
<label for="radio1">Tab 1</label> |
|
|
|
<input type="radio" name="tabs" value="2" id="radio2" /> |
|
<label for="radio2">Tab 2</label> |
|
|
|
<input type="radio" name="tabs" value="3" id="radio3" /> |
|
<label for="radio3">Tab 3</label> |
|
|
|
</div> |
|
</body> |
|
</html> |
