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>
cssinput[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,的更多相关文章
- 微信小程序radio组件 - 如何改变默认样式大小?
今天在写小程序的时候用到radio组件,但是很懊恼并未提供修改radio组件大小属性,第一感觉准备用css width , height 改变radio的大小,但是怎么搞也无法改变. 但是又不愿意搞个 ...
- input框改变默认样式
input[type="radio"] { width: 2rem; height: 2rem; -webkit-appearance: none; /*清除复选框默认样式*/ ...
- css默认样式
html, address,blockquote,body, dd, div,dl, dt, fieldset, form,frame, frameset,h1, h2, h3, h4,h5, h6, ...
- html标签默认样式整理
引:http://www.jb51.net/web/94964.html 文为大家整理了html标签默认样式属性及浏览器默认样式等等,喜欢css布局的朋友们可以学下,希望对大家有所帮助 html, a ...
- 如何在PeopleSoft中找到并更改默认样式表名称
PeopleSoft的默认样式表名称是用来控制应用程序的外观的.在PeopleSoft中可以使用集中样式表来更改应用程序的外观,oracle为每个应用程序版本设置了默认的样式表. 下面是不同应用程序版 ...
- 修改 百度地图 infowindow 默认样式
1.百度 api 没有 提供可以修改 infowindow 默认样式的 方法. 如需修改,需要 自定义 替换 默认样式. demo.html <!DOCTYPE html> <htm ...
- Ionic4.x Theming(主题) 增加内置主题 颜色 修改内置组件默认样式 修改底部 Tabs 背景颜色以及按钮颜色
1.Ionic4.x Theming(主题) Ionic4.x 修改主题颜色的话需要在 src/theme/variables.scss 文件中修改. https://ionicframework.c ...
- css选择器权重、样式继承、默认样式
学过css的小伙伴都是指css选择器的权重 !important Infinity 行间样式 1000 id 100 class|属性|伪类 10 标签|伪元素 1 通配符 0 权重相同 相同cs ...
- css3更改input单选和多选的样式
在项目开发中我们经常会遇到需要更改input单选和多选样式的情况,今天就给大家介绍一种简单改变input单选和多选样式的办法. 在这之前先简单介绍一下:before伪类 :before 选择器向选定的 ...
随机推荐
- Spark 论文篇-RDD:一种为内存化集群计算设计的容错抽象(中英双语)
论文内容: 待整理 参考文献: Resilient Distributed Datasets: A Fault-Tolerant Abstraction for In-Memory Cluster C ...
- Java线上问题排查思路及Linux常用问题分析命令学习
前言 之前线上有过一两次OOM的问题,但是每次定位问题都有点手足无措的感觉,刚好利用星期天,以测试环境为模版来学习一下Linux常用的几个排查问题的命令. 也可以帮助自己在以后的工作中快速的排查线上问 ...
- 第三部分:Android 应用程序接口指南---第二节:UI---第五章 设置(Settings)
第5章 设置(Settings) 应用程序通常包括允许用户修改应用程序的特性和行为的设置功能.例如,一些应用程序允许用户指定通知是否启用或指定多久使用云同步数据.如果你想要为你的应用程序提供设置,你应 ...
- easy_install与pip 区别
作为Python爱好者,如果不知道easy_install或者pip中的任何一个的话,那么...... easy_insall的作用和perl中的cpan,ruby中的gem类似,都提供了在线一键 ...
- Bitmap用来做大数据处理
MapReduce是一种编程模型,用于大规模数据集(大于1TB)的并行运算.概念"Map(映射)"和"Reduce(归约)" Bit-map空间压缩和快速排序去 ...
- OAuth 2.0 C# 版
using System; using System.Collections.Generic; using System.Dynamic; using System.Linq; using Syste ...
- azkaban在centos下的部署安装
azkaban 是一个用Java开发的开源调度工具workflow. 下面介绍具体安装过程,我这里使用的版本是3.43.0,使用的是solo运行模式. 编译 git clone https://git ...
- Mac/Linux如何查找应用所安装路径
Linux.Mac中查看某 个软件的安装路径(地址)有时显得非常重要.比如某个文件的快速启动项被删除,或者你要建立快速启动项,或者想删除. 添加安装文件等等,很多地方都要用到查案文件安装路径的命令. ...
- python中的selectors模块
它的功能与linux的epoll,还是select模块,poll等类似:实现高效的I/O multiplexing, 常用于非阻塞的socket的编程中: 简单介绍一下这个模块,更多内容查看 pyt ...
- Linux下MySQL5.7.18二进制包安装(无默认配置文件my_default.cnf)
最新在学习MySQL,纯新手,对Linux了解的也不多,因为是下载的最新版的MySQL(MySQL5.7.18)二进制包,CentOS7.2下测试安装,方便以后折腾.大概步骤如下,安装删除反复折腾了几 ...