单选按钮背景图片

我给出了单选按钮的bg图像。它使用chrome而不是mozilla。单选按钮背景图片

这里是我的代码

<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; 

}

来源

2012-06-29 Sowmya

请评价乌尔问题和它们标记为答案，如果它帮助你在你的问题。 – uday

你可以在http://jsfiddle.net中创建一个例子，以便更好地理解 – sandeep

这样写：

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/

来源

2012-06-29 06:30:46 sandeep

你想是这样的http://jsfiddle.net/surendraVsingh/UmpdH/5/（点击钟形图标）

CSS

label{ 
    display:block; 
    background: url(https://dl.dropbox.com/u/19982181/fab/notify.png) no-repeat; 
} 
.fieldlist input[type="radio"] { 
    float: right; 
    border: none; 
    opacity:0; 
    width: 25px; 
    height: 25px; 
    display:block; 
    float:left; 
    border:1px solid #333; 
    background-size: 20px; 
}

的Jquery ：

$("#shipadd2").click(function(){ 
    if($(this).is(":checked")){ 
     $(this).parent().css('background-position', '0 -29px'); 
    } 
    else{ 
     $(this).parent().css('background-position', '0 0'); 
    } 

});

来源

2012-06-29 07:18:14 SVS

单选按钮背景图片

回答

相关问题