一。纯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. request.GetResponse()超时的解决办法

    var request = (HttpWebRequest)WebRequest.Create(url); request.Timeout = Timeout.Infinite; request.Ke ...

  2. THE OVERARCHING PROCESS OF TEST DESIGN

    THE OVERARCHING PROCESS OF TEST DESIGN -Test note of “Essential Software Test Design” 2015-08-27 Con ...

  3. 基于jQuery商城网站全屏图片切换代码

    基于jQuery商城网站全屏图片切换代码.这是一款商城网站全屏多张图片滑动切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="slid ...

  4. 第三百九十九节,Django+Xadmin打造上线标准的在线教育平台—生产环境部署CentOS6.5安装mysql5.6

    第三百九十九节,Django+Xadmin打造上线标准的在线教育平台—生产环境部署CentOS6.5安装mysql5.6 1.检测系统是否已经安装过mysql或其依赖,若已装过要先将其删除,否则第4步 ...

  5. Java如何检查端口是否被使用?

    在Java编程中,如何扫描打开的端口(是否被使用)? 以下示例显示如何通过创建 Socket 对象来检查主机上打开或正在使用的端口(相当于一个简单的端口扫描器). package com.yiibai ...

  6. Ubuntu安装redis缓存数据库

    参考:http://blog.csdn.net/xiangwanpeng/article/details/54586087 1.在下载目录下 sudo wget http://download.red ...

  7. Linux systemd limits

    https://www.cnblogs.com/IMxY/p/8941022.html limits 关于Centos 7 / RHEL 7 中的limits要了解以下几点: CentOS 7 / R ...

  8. [IR] Dictionary Coding

    [数据压缩]LZ77算法原理及实现 [数据压缩]LZ78算法原理及实现 Lempel–Ziv–Welch 年发表的论文<A Universal Algorithm for Sequential ...

  9. fs项目---->cron框架的学习(一)

    Cron是一种允许您按计划执行某些内容的工具.这通常使用cron语法来完成.我们允许您在计划作业触发时执行函数.我们还允许您使用子进程执行javascript进程外部的作业.此外,这个库超出了基本的c ...

  10. 字符集和编码——Unicode(UTF&UCS)深度历险

    计算机网络诞生后,大家慢慢地发现一个问题:一个字节放不下一个字符了!因为需要交流,本地化的文字需要能够被支持. 最初的字符集使用7bit来存储字符,因为那时只需要存下一些英文字母和符号.后来虽然扩展到 ...