一。纯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. android 推流解决方案

    .LocalSocket + MediaRecorder + librtmp

  2. What-does-git-remote-and-origin-mean

    https://www.quora.com/What-does-git-remote-and-origin-mean https://stackoverflow.com/questions/29235 ...

  3. python和shell变量互相传递

    python -> shell: 1.环境变量 复制代码 代码如下: import os  var=123或var='123'os.environ['var']=str(var)  #envir ...

  4. 【XMPP】Smack源码之消息接收与解析

    XmpPullParser 鉴于xmpp协议都是以xml格式来传输,因此源码中解析协议都是用到XmpPullParser来解析xml XmpPullParser很简单,先简单介绍几个比较常用的方法 / ...

  5. [Tensorflow] RNN - 02. Movie Review Sentiment Prediction with LSTM

    From: Predicting Movie Review Sentiment with TensorFlow and TensorBoard Ref: http://www.cnblogs.com/ ...

  6. android基础---->service的生命周期

    服务是一个应用程序组件代表应用程序执行一个长时间操作的行为,虽然不与用户交互或供应功能供其它应用程序使用.它和其他的应用对象一样,在他的宿主进程的主线程中运行.今天我们开始android中普通serv ...

  7. [转]复制、移动和删除:cp, rm, mv

    转自:http://www.cnblogs.com/benio/archive/2010/07/27/1785929.html 要复制文件,请使用cp(copy)命令.不过,cp命令的用途很多.除了单 ...

  8. 服务器中了蠕虫病毒Wannamine2.0小记

    近期用户反馈某台服务器总感觉性能不是很好存在卡顿,于是今天远程上去分析. 打开任务管理器发现CPU使用率非常低,内存使用也在接受范围内(10/64G).不过我有一个偏好就是不喜欢用系统自带的任务管理器 ...

  9. linux的centos如何查看java的安装路径

    https://blog.csdn.net/dannistang/article/details/82906867 使用echo查看文件位置的话,前提是配置安装了环境变量java_home,否则是找不 ...

  10. 10.17正式开发stark项目(二)

    2018-10-17 11:09:48 orm补充参考连接: https://www.cnblogs.com/yuanchenqi/articles/8963244.html model 进阶 参考连 ...