未命名  

<style>
.sample input{
display: none;
}
.sample label{
display: block;
float: left;
cursor: pointer;
width: 80px;
margin: 0;
padding: 12px 5px;
border-right: 1px solid #abb2b7;
background: #bdc3c7;
color: #555e64;
font-size: 14px;
text-align: center;
line-height: 1;
transition: .2s;
}
.sample label:first-of-type{
border-radius: 3px 0 0 3px;
}
.sample label:last-of-type{
border-right: 0px;
border-radius: 0 3px 3px 0;
}
.sample input[type="radio"]:checked + label {
background-color: #a1b91d;
color: #fff;
}
</style>

<div class="sample">
<input type="radio" name="s3" id="select1" value="1" checked="">
<label for="select1">HDD</label>
<input type="radio" name="s3" id="select2" value="2">
<label for="select2">SSD</label>
<input type="radio" name="s3" id="select3" value="3">
<label for="select3">RAM</label>
<input type="radio" name="s3" id="select4" value="4">
<label for="select4">VGA</label>
<input type="radio" name="s3" id="select5" value="5">
<label for="select5">POWER</label>
</div>

創作者介紹
創作者 shadow 的頭像
shadow

資訊園

shadow 發表在 痞客邦 留言(0) 人氣()