css – 单选按钮背景图片

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

这是我的代码

  1. <div class="fieldlist">
  2. <label for="shipadd2">
  3. <input type="radio" id="shipadd2" name="address" />
  4. <div class="compacttext"> Lorem ipsum </div>
  5. </label>
  6. </div>

CSS是

  1. .fieldlist input[type="radio"] {
  2. float: right;
  3. -webkit-appearance: none;
  4. border: none;
  5. width: 25px;
  6. height: 25px;
  7. background: url(images/radio.png) left center no-repeat;
  8. background-size: 20px;
  9. }
  10. .fieldlist input[type="radio"]:checked {
  11. background: url(images/radio_checked.png) left center no-repeat;
  12.  
  13. }

解决方法

这样写:

CSS:

  1. input[type="radio"]{
  2. display:none;
  3. }
  4.  
  5. input[type="radio"] + label
  6. {
  7. background: #999;
  8. height: 16px;
  9. width: 16px;
  10. display:inline-block;
  11. padding: 0 0 0 0px;
  12. }
  13.  
  14. input[type="radio"]:checked + label
  15. {
  16. background: #0080FF;
  17. height: 16px;
  18. width: 16px;
  19. display:inline-block;
  20. padding: 0 0 0 0px;
  21. }

HTML

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

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

猜你在找的CSS相关文章