- 去除input边框
- input去除边框
- 去除input框获取焦点时的蓝色外边框
@ sunRainAmazing
**
去除input的边框仅仅用border属性 ，其实是不能满足我们的需求的
此外还需要加上outline属性才可以 实现我们想要的样式
**
去除边框的代码 border-width:0; 即可去除相应的周围的边框
但是实际，并不能达到我们想要的效果，
而appearance:none;也不能达到我们想要的效果。
如下图展示：
边框input3 获取焦点的样式 
很明显，有一个淡蓝色的外边框在上面
因此，需要 添加 ,去除input的外边线框，如下
outline：none
或
outline:medium;
源码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>去除input的边框</title>
<style>
input{text-indent: 1em;}
#search1{ }
#search2{ border-width: 0; }
#search3{ border:1px solid red; }
#search4{ outline:medium;}
/*获取焦点时 外边框显示红色*/
#search4:focus{ border:1px solid red; }
#search5:focus{ border:1px solid red; }
#search5: { appearance: none; }
</style>
</head>
<body>
<br/>
<input type="text" id="search1" name="search"
placeholder="请输入搜索内容1" />
<input type="text" id="search2" name="search"
placeholder="请输入搜索内容2" /> <br/><br/>
<input type="text" id="search3" name="search"
placeholder="请输入搜索内容3" />
<input type="text" id="search4" name="search"
placeholder="请输入搜索内容4" /> <br/><br/>
<input type="text" id="search5" name="search"
placeholder="请输入搜索内容5" /> <br/><br/>
</body>
</html>