一。纯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

radio样式的写法,单选和多选如何快速的改变默认样式,纯CSS,的更多相关文章

  1. 微信小程序radio组件 - 如何改变默认样式大小?

    今天在写小程序的时候用到radio组件,但是很懊恼并未提供修改radio组件大小属性,第一感觉准备用css width , height 改变radio的大小,但是怎么搞也无法改变. 但是又不愿意搞个 ...

  2. input框改变默认样式

      input[type="radio"] { width: 2rem; height: 2rem; -webkit-appearance: none; /*清除复选框默认样式*/ ...

  3. css默认样式

    html, address,blockquote,body, dd, div,dl, dt, fieldset, form,frame, frameset,h1, h2, h3, h4,h5, h6, ...

  4. html标签默认样式整理

    引:http://www.jb51.net/web/94964.html 文为大家整理了html标签默认样式属性及浏览器默认样式等等,喜欢css布局的朋友们可以学下,希望对大家有所帮助 html, a ...

  5. 如何在PeopleSoft中找到并更改默认样式表名称

    PeopleSoft的默认样式表名称是用来控制应用程序的外观的.在PeopleSoft中可以使用集中样式表来更改应用程序的外观,oracle为每个应用程序版本设置了默认的样式表. 下面是不同应用程序版 ...

  6. 修改 百度地图 infowindow 默认样式

    1.百度 api 没有 提供可以修改 infowindow 默认样式的 方法. 如需修改,需要 自定义 替换 默认样式. demo.html <!DOCTYPE html> <htm ...

  7. Ionic4.x Theming(主题) 增加内置主题 颜色 修改内置组件默认样式 修改底部 Tabs 背景颜色以及按钮颜色

    1.Ionic4.x Theming(主题) Ionic4.x 修改主题颜色的话需要在 src/theme/variables.scss 文件中修改. https://ionicframework.c ...

  8. css选择器权重、样式继承、默认样式

    学过css的小伙伴都是指css选择器的权重 !important Infinity 行间样式 1000 id   100 class|属性|伪类 10 标签|伪元素 1 通配符 0 权重相同 相同cs ...

  9. css3更改input单选和多选的样式

    在项目开发中我们经常会遇到需要更改input单选和多选样式的情况,今天就给大家介绍一种简单改变input单选和多选样式的办法. 在这之前先简单介绍一下:before伪类 :before 选择器向选定的 ...

随机推荐

  1. Kubernetes1.2如何使用iptables

    转:http://blog.csdn.net/horsefoot/article/details/51249161 本次分析的kubernetes版本号:v1.2.1-beta.0. Kubernet ...

  2. [svc]find+xargs/sed&sed后向引用+awk多匹配符+过滤行绝招总结&&产生随机数

    30天内的文件打包 find ./test_log -type f -mtime -30|xargs tar -cvf test_log.tar.gz find,文件+超过7天+超过1M的+按日期为文 ...

  3. 主机使用代理上网,虚拟机centos7如何连外网

    简介  今天任务不多,就想在学一些fastdfs,然后发现公司是通过代理上外网的,这里记录下,主机使用代理上网,虚拟机centos7如何连外网 vi /etc/yum.conf 加上 proxy=ht ...

  4. 施工测量中Cad一些非常有用的插件

    经常会遇到坐标在cad中批量展点.从cad中批量保存坐标点.导入cad中的坐标怎么才能有点号,怎么快速标注cad里的坐标点··· ··· 这一切都是可以程序化的,cad是可以二次开发的,我经常用易语言 ...

  5. mysql解决大量time_wait

    mysql解决大量time_wait     命令查看TIME_WAIT连接数 netstat -ae|grep "TIME_WAIT" |wc -l 早上登陆服务器的时候输入ne ...

  6. 嵌入式开发之hi3519---进程线程间的同步和互斥,条件变量、信号了、互斥锁等

    sem_post 最安全 sem  有序,会卡顿 阻塞 mutex  无序,不能同步 http://blog.chinaunix.net/uid-20671208-id-4935154.html ht ...

  7. SSH远程连接Linux配置

    CentOS:   开启远程连接服务:service sshd start 添加到系统启动项:chkconfig sshd on 客户端工具:windows下连接工具putty   ========= ...

  8. 网络编程 -- RPC实现原理 -- RPC -- 迭代版本V1 -- 本地方法调用

    网络编程 -- RPC实现原理 -- 目录 啦啦啦 V1——RPC -- 本地方法调用:不通过网络 入门 1. RPCObjectProxy rpcObjectProxy = new RPCObjec ...

  9. Tomcat -- 启动错误 -- 解决锦集

    java.lang.NoSuchMethodException: org.apache.catalina.deploy.WebXml addFilter :在Tomacat7的context.xml文 ...

  10. 使用Python管理压缩包

    一. 使用tarfile库读取与创建tar包 1. 创建tar包 In [1]: import tarfile In [2]: with tarfile.open('demo.tar',mode='w ...