CSS input获取焦点时样式设置
input获取焦点时样式设置
在当前页面，导航条之中的搜索框点击之后，获取焦点时，input定义的输出框的周围会有一层光晕，这该如何设置呢？默认情况下，input获取焦点之后，周围会有一个蓝色的边框，如果想要去掉又该怎么设置呢？如果想要在input输入框获取焦点之后，改变背景色，那又该如何设计呢？
可以通过CSS中的input的:focus伪类选择器来选择获取焦点状态的input元素，然后设置其样式，语法如下：
input:focus{样式设置}
input获取焦点时样式设置实例代码，及在线编辑器
下面这个实例，将实现第一段落中提到的三种样式的设置：
<br><br>
<input type='text' placeholder='请输入内容' id='inp'>
<style>
#inp{width:100%;height:35px;border-radius:5px;border:1px solid skyblue;}
#inp:focus{background-color:orange;outline:none;box-shadow:0px 0px 5px 1px skyblue;}
</style>