架构师_程序员

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 74|回复: 0

[CSS/DIV] 纯CSS3美化单选按钮radio

[复制链接]
跳转到指定楼层
楼主
发表于 2019-5-16 11:10:41
这种纯CSS3美化单选按钮radio的方法适用于以下情况:

1、可兼容IE9以上,需要兼容IE8的要写IE的hack把样式去掉

2、只支持单选按钮radio,因为单选按钮选中样式的圆圈可以用CSS做出来,但是复选按钮checkbox的选中效果对勾就需要图片或者图标字体库

3、不需要JS支持切换效果

下图是最终效果图:



HTML代码:

  1. <label for="man" class="radio">
  2.     <span class="radio-bg"></span>
  3.     <input type="radio" name="sex" id="man" value="男" checked="checked" /> 男
  4.     <span class="radio-on"></span>
  5. </label>
  6. <label for="woman" class="radio">
  7.     <span class="radio-bg"></span>
  8.     <input type="radio" name="sex" id="woman" value="女" /> 女
  9.     <span class="radio-on"></span>
  10. </label>
复制代码
CSS代码:

  1. .radio{
  2.     display: inline-block;
  3.     position: relative;
  4.     line-height: 18px;
  5.     margin-right: 10px;
  6.     cursor: pointer;
  7. }
  8. .radio input{
  9.     display: none;
  10. }
  11. .radio .radio-bg{
  12.     display: inline-block;
  13.     height: 18px;
  14.     width: 18px;
  15.     margin-right: 5px;
  16.     padding: 0;
  17.     background-color: #45bcb8;
  18.     border-radius: 100%;
  19.     vertical-align: top;
  20.     box-shadow: 0 1px 15px rgba(0, 0, 0, 0.1) inset, 0 1px 4px rgba(0, 0, 0, 0.1) inset, 1px -1px 2px rgba(0, 0, 0, 0.1);
  21.     cursor: pointer;
  22.     transition: all 0.2s ease;
  23. }
  24. .radio .radio-on{
  25.     display: none;
  26. }
  27. .radio input:checked + span.radio-on{
  28.     width: 10px;
  29.     height: 10px;
  30.     position: absolute;
  31.     border-radius: 100%;
  32.     background: #FFFFFF;
  33.     top: 4px;
  34.     left: 4px;
  35.     box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.3), 0 0 1px rgba(255, 255, 255, 0.4) inset;
  36.     background-image: linear-gradient(#ffffff 0, #e7e7e7 100%);
  37.     transform: scale(0, 0);
  38.     transition: all 0.2s ease;
  39.     transform: scale(1, 1);
  40.     display: inline-block;
  41. }
复制代码
这个方法中最重要的是选中效果的类名:.radio input:checked + span.radio-on

+是CSS2的伪类,其意义为:div+p 选择紧接在 <div> 元素之后的所有 <p> 元素。

也就是找到选中的(:checked)的input,其之后的类名为radio-on的span元素做选中圆圈效果。



网上有很多美化方法是把label做成了圆圈,但是这样的话,单选的文字就必须要要放到label的外面,这导致了点击文字的时候,不能切换单选效果。

所以我在label里加了一个类名为radio-bg的span来专门做后面大的圆圈,再用一个类名为radio-on的span来做选中的前面小的圆圈。

这样就保留了点击label里的文字,也可以切换单选的效果。

附上:jQuery 取选中的radio的值方法

var val=$('input:radio[name="sex"]:checked').val();

附三种方法都可以:

$('input:radio:checked').val();

$("input[type='radio']:checked").val();

$("input[name='rd']:checked").val();





上一篇:疾速备战3(5.17上映)
下一篇:ajax和axios、fetch的区别
帖子永久地址: 

架构师_程序员 - 论坛版权1、本主题所有言论和图片纯属会员个人意见,与本论坛立场无关
2、本站所有主题由该帖子作者发表,该帖子作者与架构师_程序员享有帖子相关版权
3、其他单位或个人使用、转载或引用本文时必须同时征得该帖子作者和架构师_程序员的同意
4、帖子作者须承担一切因本文发表而直接或间接导致的民事或刑事法律责任
5、本帖部分内容转载自其它媒体,但并不代表本站赞同其观点和对其真实性负责
6、如本帖侵犯到任何版权问题,请立即告知本站,本站将及时予与删除并致以最深的歉意
7、架构师_程序员管理员和版主有权不事先通知发贴者而删除本文

码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

免责声明:
码农网所发布的一切软件、编程资料或者文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

Mail To:help@itsvse.com

QQ|Archiver|手机版|小黑屋|架构师 ( 鲁ICP备14021824号-2 )|网站地图

GMT+8, 2019-5-27 14:25

Powered by Discuz! X3.4

© 2001-2014 Comsenz Inc.

快速回复 返回顶部 返回列表