效果图:

html:

<div class="item"><div class="rad"></div><span class="sexs">男</span></div>
<div class="item check"><div class="rad"></div><span class="sexs">女</span></div>
 
css:(用的less,自己分解出来)
.item{
margin-right:5px;
display: inline-block;
padding: 0 5px;
font-size: 12px;
color: #BFBFBF;
font-family: "DIN";
cursor: pointer;
.rad{
float: left;
margin-top: 4px;
margin-right: 4px;
width: 4px;
height: 4px;
padding: 2px;
border: 1px solid;
border-radius: 50%;
background-clip: content-box;
}
.sexs{
font-size: 12px;
}
}
.check {
color: #FB452F;
position: relative;
}
.check .rad{
border: 1px solid #BFBFBF;
background-color: currentColor;
}
 
 
js:
//点击单选按钮事件
var items=document.getElementsByClassName("item");
for(var i=0;i<items.length;i++){
console.log(items[1].classList)
items[i].onclick=function(){
for(var j=0;j<items.length;j++){
items[j].classList.remove("check");
 
}
$(this).addClass("check");
 
}
 
}

js+css--单选按钮,自定义选中的颜色???(性别按钮,男女)的更多相关文章

  1. 纯 CSS 解决自定义 CheckBox 背景颜色问题

    CodePen 需要使用色 #ec6337(当然可以是任意颜色),解决问题:记住密码定制 CheckBox,解释全在注释里 主要使用到 ::before 或 ::after 伪类处理,伪装成内部的那个 ...

  2. UITableView 自定义选中Cell颜色

    cell.selectedBackgroundView = [[UIView alloc] initWithFrame:cell.frame]; cell.selectedBackgroundView ...

  3. JavaGUI——设置框架背景颜色和按钮颜色

    import java.awt.Color; import javax.swing.*; public class MyDraw { public static void main(String[] ...

  4. JS 百度地图 换地图主题颜色(自定义)

    JS 百度地图 换地图主题颜色(自定义) 可通过这个在线编辑得到自己想要的主题:https://developer.baidu.com/map/custom/ <div id="all ...

  5. 简单的JS+CSS实现网页自定义换肤

     1,实现效果 2,实现原理 主要原理是利用css变量设置颜色,用js动态修改变量,使颜色变化,兼容性如下: 实现换肤之前先要了解一下伪类选择器 :root ,还有css的 var() 函数和 set ...

  6. JS/CSS缓存杀手——VS插件

    背景 前些天去考科目二,感觉经历了一场不是高考却胜似高考的考试(10年前的5分之差, 还是难以释怀)!    一行八人,就我学的时间最少(4天,8人一辆车),教练都觉得我肯定还得再来一次! 靠着运气和 ...

  7. css笔记——css 实现自定义按钮

    css实现自定义按钮的样式实际上很早就有了,只是会用的人不是很多,里面涉及到了最基础的css写法,在火狐中按钮还是会显示出来,这时需要将i标签的背景设置为白色,同时z-index设置比input高一些 ...

  8. 使用 jQuery 实现页面背景色的更换,通过下拉框选择对应的颜色,页面背景会随着选中的颜色进行更换

    查看本章节 查看作业目录 需求说明: 使用 jQuery 实现页面背景色的更换,通过下拉框选择对应的颜色,页面背景会随着选中的颜色进行更换 实现思路: 在页面中添加 <select> 标签 ...

  9. wordpress优化之结合prism.js为编辑器自定义按钮转化代码

    原文链接 http://ymblog.net/2016/07/24/wordpress-prism/ 继昨天花了一天一夜的时间匆匆写了主题Jiameil3.0之后,心中一直在想着优化加速,体验更好,插 ...

随机推荐

  1. delphi : 窗体的close,free,destroy

    一.我用application.create(TForm2,Form2)语句,创建了Form2,可是调用了Form2.close后,重新调用Form2.show. 刚才所创建的Form2仍然存在.问为 ...

  2. 【Spring】---【AOP】

    转发几篇文章 专治不会看源码的毛病--spring源码解析AOP篇 Spring3:AOP 理解AOP 什么是AOP? 转自: http://www.cnblogs.com/xiexj/p/73668 ...

  3. Struts2基本流程

    转载:https://www.cnblogs.com/wkrbky/p/5894174.html 概述: Struts2框架由三部分构成:核心控制器.业务控制器和用户实现的业务逻辑组件.在这三部分中, ...

  4. IntlliJ IDEA 注册码获取或离线破解

    JB 的软件还是挺好用的,建议有钱的话支持正版.. IntelliJ IDEA 有开源版,但是要想玩企业级开发,还是得用收费版. 不管哪种方式,使用前都需要把"0.0.0.0 account ...

  5. Python --链接MYSQL数据库与简单操作 含SSH链接

    项目是软硬件结合,在缺少设备的情况,需要通过接口来模拟实现与设备的交互,其中就需要通过从数据库读取商品的ID信息 出于安全考虑  现在很多数据库都不允许通过直接访问,大多数是通过SSH SSH : 数 ...

  6. kafka学习(八)

    管理kafka     主题操作 1.在集群里创建一个主题需要用到3个参数.这些参数是必须提供的,尽管有些已经有broker级别的默认值.   主题名字,想要创建的主题的名字,主题名字可以包含字母,数 ...

  7. 分享一个linux系统中循环遍历两个数组内容,并输出数组中的不同内容的shell脚本

    cat diffarray.sh #!/bin/bash arry_list1=(1 2 3 4 5 6 7 8 9) arry_list2=(3 5 8) declare -a diff_list ...

  8. urllib库认证,代理,cookie

    认证,代理,cookie 1from urllib.request import HTTPBasicAuthHandler, HTTPPasswordMgrWithDefaultRealm, buil ...

  9. mui前端框架下拉刷新分页加载数据

    前台 mui.init(); (function($) { //阻尼系数 var deceleration = mui.os.ios?0.003:0.0009; $('.mui-scroll-wrap ...

  10. HDU-4857 逃生(反向拓扑排序 + 逆向输出)

    逃生 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submissi ...