<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<style>
.div1{
text-align: center
background: beige
width: 50px
height: 28px
border-radius: 14px
}
.span1{
/* margin-top: 7px*/ /* div的时候打开注释 */
background: #CCCCCC
width: 13px
height: 13px
display: inline-block
border-radius: 7px
}
.div2{
text-align: center
background: lawngreen
width: 50px
height: 28px
border-radius: 14px
}
.span2{
background: white
width: 13px
height: 13px
display: inline-block
border-radius: 7px
}
.hid1{
display: none
}
.hid2{
}
</style>
<body>
<!-- button的 -->
<button class="div1">
<span class="hid1">是</span>
<span class="span1"></span>
<span class="hid2">否</span>
</button>
<hr>
<hr>
<!-- div的 -->
<!-- <div class="div1">
<span class="hid1">是</span>
<span class="span1"></span>
<span class="hid2">否</span>
</div>-->
</body>
<script>
$(function(){
$(".div1").click(function(){
$(".span1").toggleClass("span2")
$(".div1").toggleClass("div2")
$(".hid1").toggle()
$(".hid2").toggle()
})
})
</script>
</html>
您好，如单选框，它会默认有一个圆形的选择框，如果觉得不好看，可以将这个标签定位到可视界面以外，因为你使用label标签是可以选中这个选择框的，你只需要更改该label标签的样式就行了用css写足矣，css中有focus这个神奇的东西，难道你没有用过吗，给你个例子吧
html:
<input type="text" placeholder="Enter Name." name="name" maxlength="300" class="input">css:
.input {border:0
padding:10px
font-size:1.3em
font-family:"Ubuntu Light","Ubuntu","Ubuntu Mono","Segoe Print","Segoe UI"
color:#ccc
border:solid 1px #ccc
margin:0 0 20px
width:300px
-moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2)
-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2)
box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2)
-webkit-border-radius: 3px
-moz-border-radius: 3px
border-radius: 3px
}
input:focus {
outline: none !important
border:1px solid red
box-shadow: 0 0 10px #719ECE
}
