css – 单选按钮背景图片

前端之家收集整理的这篇文章主要介绍了css – 单选按钮背景图片前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我给了bg图像单选按钮.它是在铬工作,但不是在莫西拉.

这是我的代码

<div class="fieldlist">
    <label for="shipadd2">
    <input type="radio" id="shipadd2" name="address" />   
    <div class="compacttext"> Lorem ipsum </div>
    </label>
  </div>

CSS是

.fieldlist input[type="radio"] {
    float: right;
    -webkit-appearance: none;
    border: none;
    width: 25px;
    height: 25px;
    background: url(images/radio.png) left center no-repeat;    
    background-size: 20px; 
}
.fieldlist input[type="radio"]:checked {
    background: url(images/radio_checked.png) left center no-repeat;

}

解决方法

这样写:

CSS:

input[type="radio"]{
    display:none;
}

input[type="radio"] + label
{
    background: #999;
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}

input[type="radio"]:checked + label
{
    background: #0080FF;
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}

HTML

<input type="radio" id="shipadd2" name="address" />
<label for="shipadd2"></label>

阅读这篇文章了解更多http://css-tricks.com/the-checkbox-hack/

猜你在找的CSS相关文章