去除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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39