一。纯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. 图解ByteBuffer

    https://www.cnblogs.com/ruber/p/6857159.html https://www.e-learn.cn/content/qita/750752 https://blog ...

  2. [APM] 解读APM技术分类和实现方式

    在讲了APM的历史.作用和实际案例之后,下面我们来了解一下APM技术分类和实现方式以及它未来的发展趋势.在这之前,我们首先需要了解一下典型的互联网或移动互联网应用的整个应用交付链. 图1 上面这张示意 ...

  3. Centos7.x 执行top命令教程

    一.作用 top命令用来显示执行中的进程,使用权限是所有用户 二.格式 top [-] [d delay] [q] [c] [S] [s] [i] [n] 三.命令参数解释 d:指定更新的间隔,以秒计 ...

  4. VirtualBox 4.3“不能为虚拟电脑 打开一个新任务”解决方案 - 转

    最近做项目因为设计不同网络,还要大家文件和数据库服务器环境,所以需要多台机器进行测试,最简单的方法当然是跑多个虚拟机了.虽然不可否认 VMware 确实强大,不过相比较起来我更喜欢功能比较简单轻省的 ...

  5. JAVA的各种O

    转自:http://jeoff.blog.51cto.com/186264/88517/ J2EE开发中大量的专业缩略语很是让人迷惑, 特别是对于刚毕业的新人来说更是摸不清头脑.若与公司大牛谈技术人家 ...

  6. Cocos2d-x 3.0 纹理

    1.纹理控制. Sprite *pSprite = Sprite::create("background.png"); TexParams params = {GL_NEAREST ...

  7. ABBYY OCR技术教电脑阅读缅甸语(下)

    文本行检测到之后,我们开始寻找单词和字母之间的间隙,这一次,我们运用了水平直方图,将大的间隙假设为单词之间的空隙,小的间隙理解为字母之间的空隙,检测缅甸文本中的空隙几乎没有出现问题,不像泰语,几乎没有 ...

  8. yum 快速安装centos7 mysql5.7

    CentOS7 yum方式安装MySQL5.7   在CentOS中默认安装有MariaDB,这个是MySQL的分支,但为了需要,还是要在系统中安装MySQL,而且安装完成之后可以直接覆盖掉Maria ...

  9. webpack + vue 项目 自定义 插件 解决 前端 JS 版本 更新 问题

    Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 它的异步加载原理是,事先将编译好后的静态文件,通过js对象映射,硬编 ...

  10. fiddler配置手机抓包

    参考:https://blog.csdn.net/gld824125233/article/details/52588275 注:我内部用,没有https,不用配置https证书.