单选按钮背景图像 [英] Radio button background image

问题描述

我给了bg图片的单选按钮。

这是我的代码

 < div class =fieldlist> 
< label for =shipadd2> 
< input type =radioid =shipadd2name =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; 
 
} 
  

解决方案

：

  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 =radioid =shipadd2name =address/> 
< label for =shipadd2>< / label> 
  

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

I have given bg image for radio button. It is working in chrome but not in mozilla.

Here is my code

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

CSS is

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

}

解决方案

Write like this:

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>

Read this article for more http://css-tricks.com/the-checkbox-hack/

这篇关于单选按钮背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！