怎样使得input标签在光标聚焦时保留圆角边框
我们经常给input标签设置圆角边框,可是设置圆角边框后却发现当鼠标点击时即光标聚焦时光标是没有圆角边框的,再加上原有设置的圆角边框,使得按钮非常难看。
![按钮在光标聚焦时非常难看](https://img-blog.csdnimg.cn/20190731111016643.png)
怎么办呢?
首先,这是由于光标聚焦时有个 outline标签,它就是那条蓝色的线,可是,outline并没有 border-radius属性,也就是说无法给outline添加border-radius属性从而达到目的。因此,我们给outline设置为 none;即不显示outline。而使用jquery给input标签添加focus和blur事件,设置 border的颜色,从而达到目的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--导入jquery-->
<script src="js/jquery-1.12.4.js"></script>
<style>
input{
/*给input标签添加圆角边框*/
border-radius:12px;
background-color:white;
/*设置边框样式*/
border:1px solid #ccc;
/*设置outline为不显示*/
outline:none;
}
body{
padding:50px;
}
</style>
<script>
$(document).ready(function(){
$("input[type='button']").focus(function(){
/*设置光标聚焦时的边框颜色,可以自定义*/
$(this).css("border-color","#66AFE9");
});
$("input[type='button']").blur(function(){
/*设置光标失去焦点时的边框颜色,与input里border的颜色保持一致*/
$(this).css("border-color","#ccc");
});
});
</script>
</head>
<body>
<input type="button" value="点击这个按钮">
</body>
</html>
运行结果如图
这也算曲线救国方法了吧?