js+css--单选按钮,自定义选中的颜色???(性别按钮,男女)

效果图:

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");

}

}

原文地址:https://www.cnblogs.com/snowbxb/p/11757468.html

时间: 2024-10-09 16:19:31

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

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

CodePen 需要使用色 #ec6337(当然可以是任意颜色),解决问题:记住密码定制 CheckBox,解释全在注释里 主要使用到 ::before 或 ::after 伪类处理,伪装成内部的那个勾 html <label> <input type="checkbox" /> // 注意嵌在 label 里面 记住密码 <div class="show-box" /> // 注意嵌在 label 里面 </label&g

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

import java.awt.Color; import javax.swing.*; public class MyDraw { public static void main(String[] args) { //创建框架 JFrame myFrame=new JFrame("图画"); //myFrame.setLocation(200, 300);//第1参数表示离左屏幕边框距离,第2参数表示离屏幕上边框距离 myFrame.setSize(600, 400); myFram

CSS改变默认文本选中的颜色的方法

请选择本页面文本看看:http://hovertree.com/h/bjaf/38hq6y9d.htm 一般情况下在网页里的文本我们用鼠标选中的时候都是蓝色的,这个默认颜色也是可以更改的,本文我们学习如何使用CSS3实现改变默认文本选中的颜色.以我的系统举例(xp 默认主题),浏览器上页面文字选中后默认的背景色是一种蓝色, 不同浏览器的颜色有些许差异,但大致相同,文字颜色也近乎白色. 一.关于浏览器文字选中颜色:在CSS3的爸爸 妈妈还没有相亲认识的时候,要改变页面上文字选中后的背景色以及文字颜

CSS如何设置选中文本的颜色

CSS如何设置选中文本的颜色:在默认状态选中的文本颜色和背景颜色并不美观,如果能够给句网站整体的配色来设置被选中文本和背景颜色那么将会极大的提高美观度,下面就通过代码实例介绍一下如何实现此效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwh

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

JS 百度地图 换地图主题颜色(自定义) <div id="allmap"></div> 自定义主题文件: var mapStyleBrown =[{ "featureType": "land", "elementType": "geometry", "stylers": { "color": "#0b1b2bff" } }

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

背景 前些天去考科目二,感觉经历了一场不是高考却胜似高考的考试(10年前的5分之差, 还是难以释怀)!    一行八人,就我学的时间最少(4天,8人一辆车),教练都觉得我肯定还得再来一次! 靠着运气和信念,惊险的通过了侧方停车和倒车入库,终于还是抚慰了一下10年前那颗年轻的心!  ----------感慨完毕,回归主题---------- 终于修改完了客户提交的bugs,发布.更新.测试.邮件通知,悠哉悠哉的浏览博客园...然后客户来了... 客户:我提的需求怎么都没修改,这个按钮颜色也没变,点

js获取单选按钮的值

<!DOCTYPE html> <html> <body> <script type="text/javascript"> function select_patten(value) { // varvalue=document.getElementsByName(text).value; //  alert('hello'); alert(value); } </script> //以下这种方式只能获得单个单选按钮的valu

实用js+css多级树形展开效果导航菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

js+css实现带缓冲效果右键弹出菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ