一。纯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. zabbix server is not running,the information dispalyed may not be current

    查看zabbix服务器和客户端的端口及进程都是正常启动,打印的日志也没什么异常,但是就是在主页提示zabbix server is not running 不防尝试改一下zabbix_server的配 ...

  2. android studio build.gradle 中的dependencies 的 compile jar文件

    1.其下载之后的存放地址 例如:compile 'com.qiniu:happy-dns:0.2.5' 存放在:.gradle\caches\modules-\files-\c0ee826650468 ...

  3. js数组相关知识集合

    一.js数组快速排序 <script type="text/javascript"> var arr = [1, 2, 3, 54, 22, 1, 2, 3]; fun ...

  4. cad巧用插件自定义填充图形

    很多同志如果遇到奇葩的填充图案,怎么办,找不到合适的,自己辛苦画了一遍,想把它作为自己的自定义的图案,怎么办呢. 今天老王给你您介绍个好用的插件. 首先在命令行输入命令  ap 弹出加载对话框 打开窗 ...

  5. 业界常用的和不常用cad快捷键

    AutoCAD 是目前世界各国工程设计人员的首选设计软件,简便易学.精确无误是AutoCAD成功的两个重要原因.AutoCAD提供的命令有很多,绘图时最常用的命令只有其中的百分之二十. 在CAD软件操 ...

  6. javascript and jquery 代码块

    1.5秒隐藏 (setTimeout ) setTimeout( function(){ $('.ad_midd').slideUp(); } , 5000 )

  7. 再战android-语音识别2(修改配置)

    可怕的半桶水一直在晃.程序中需要根据用户的选择设置语音识别的语言(目前科大讯飞支持英文.普通话.粤语),不想每次要用户去IatSetting中去改,需要能直接修改IatSetting的设置.之前移植的 ...

  8. MYSQL + MHA +keepalive + VIP安装配置(三)--keepalived安装配置

    一.概述 keepalived介绍:Keepalived的作用是检测web服务器的状态,如果有一台web服务器死机,或工作出现故障,Keepalived将检测到,并将有故障的web 服务器从系统中剔除 ...

  9. org.apache.http.TruncatedChunkException: Truncated chunk ( expected size: 47956; actual size: 35656)

    在使用httpcomponents-client-4.2.1时,任务运行一段时间就抛出以下一场 下面是异常的堆栈信息: org.apache.http.TruncatedChunkException: ...

  10. c++类成员函数后边加const是为什么?

    时间是让人猝不及防的东西,晴是有风阴时有雨,争不过朝夕,又念着往昔,偷走了青丝却留住一个你 #include <iostream> #include <string> usin ...