首页新闻找找看学习计划

button按钮问题

0
悬赏园豆:15 [已解决问题] 解决于 2019-12-27 10:20


为什么我的按钮点击的时候边缘会有一个框框,我发一下我的代码,麻烦大佬帮我看一下,谢谢
css部分的
.btn1 button{
width: 80px;
margin: 4px;
border-radius: 5px;
border: 0px ;
height: 35px;
font-size: 13px;
text-align: center;
color: #000000;
}
.btn2 button{
width: 80px;
margin: 4px;
border-radius: 5px;
border: 0px ;
height: 35px;
font-size: 13px;
text-align: center;
color: #000000;
}
.btn3 button{
width: 80px;
margin: 4px;
border-radius: 5px;
border: 0px ;
height: 35px;
font-size: 13px;
text-align: center;
color: #000000;
}
.btn{
/* width: 100%; */
position:fixed;
top: 70px;
}
html部分
<div class="btn">
<div class="btn1">
<button type="button" style="background-color: #00a3da;color: #FFFFFF;">国家</button>
<button type="button" class="onlic">美国</button>
<button type="button" class="onlic">日本</button>
<button type="button" class="onlic">英国</button>
<button type="button" class="onlic">法国</button>
<button type="button" class="onlic">其他</button>
</div>
<div class="btn2">
<button type="button" style="background-color: #00a3da;color: #FFFFFF;">游学类型</button>
<button type="button" class="onlic">走读</button>
<button type="button" class="onlic">交换</button>
<button type="button" class="onlic">宿舍</button>
<button type="button" class="onlic">工读</button>
<button type="button" class="onlic">寄宿</button>
</div>
<div class="btn3">
<button type="button" style="background-color: #00a3da;color: #FFFFFF;">年纪</button>
<button type="button" class="onlic">高中</button>
<button type="button" class="onlic">预科</button>
<button type="button" class="onlic">本科</button>
<button type="button" class="onlic">硕士</button>
<button type="button" class="onlic">博士</button>
</div>
</div>
jQuery部分
$(document).ready(function(){
$(".btn1 button").click(function() {
$(".btn1 button").removeClass("red");
$(this).addClass("red");
})
})
$(document).ready(function(){
$(".btn2 button").click(function() {
$(".btn2 button").removeClass("red");
$(this).addClass("red");
})
})
$(document).ready(function(){
$(".btn3 button").click(function() {
$(".btn3 button").removeClass("red");
$(this).addClass("red");
})
})

小白萝卜呀的主页 小白萝卜呀 | 初学一级 | 园豆:3
提问于:2019-12-25 14:43
< >
分享
最佳答案
1

那是浏览器默认的focus的 outline样式,你可以重写一下focus的outline:none

收获园豆:15
授之以渔 | 小虾三级 |园豆:1076 | 2019-12-25 17:15
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册