html 创建看起来像按钮的单选按钮

Posted 2021-05-11

http://jsfiddle.net/YB8UW/8/

<ul class="donate-now">
<li>
    <input type="radio" id="low" name="low" />
    <label for="low">LOW</label>
</li>
<li>
    <input type="radio" id="medium" name="medium" />
    <label for="medium">MEDIUM</label>
</li>
<li>
    <input type="radio" id="high" name="high" checked="checked" />
    <label for="high">HIGH</label>
</li>

</ul>


CSS;

.donate-now {
     list-style-type:none;
     margin:25px 0 0 0;
     padding:0;
}

.donate-now li {
     float:left;
     margin:0 5px 0 0;
    width:100px;
    height:40px;
    position:relative;
}

.donate-now label, .donate-now input {
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

.donate-now input[type="radio"] {
    opacity:0.011;
    z-index:100;
}

.donate-now input[type="radio"]:checked + label {
    background:#9f4c49;
    color: #fff;
}

.donate-now label {
     padding:5px;
     border:1px solid #CCC; 
     cursor:pointer;
    z-index:90;
}

.donate-now label:hover {
     background:#DDD;
}