radio样式的写法，单选和多选如何快速的改变默认样式，纯CSS，

一。纯CSS写法改变单选框的默认选择样式，用背景图片代替

input[type='radio']:radio:before {
content: '';//这里需要有
width: 20px;
height: 20px;
display: inline-block;
background-image: url(img/lzw_check.png);//你要改变的样式图片
background-color: #2398f8;
background-size: cover;
border-radius: 10px;
}

因为ionic中的radio是完全是用初始化的样式的，理论上是同样适用的，暂时还未做尝试，博客持续更新

 

二。还有一种是用JS代码来实现

html

<div>
  <input type="radio" id="nba" checked="checked" name="sport" value="nba"> <label name="nba" class="checked" for="nba">NBA</label> <input type="radio" id="cba" name="sport" value="cba"> <label name="cba" for="cba">CBA</label> </div>

css

input[type="radio"] {

  margin: 3px 3px 0px 5px; display: none; } label { padding-left: 20px; cursor: pointer; background: url(bg.gif) no-repeat left top; } label.checked { background-position: left bottom; }

js
$(function() {
  $('label').click(function(){ var radioId = $(this).attr('name'); $('label').removeAttr('class') && $(this).attr('class', 'checked'); $('input[type="radio"]').removeAttr('checked') && $('#' + radioId).attr('checked', 'checked'); }); });

这办法是别人打代码，自己没尝试过，附上地址链接

https://segmentfault.com/q/1010000000521764

转载于:https://www.cnblogs.com/ChineseLiao/p/7410377.html