去除input边框

article/2025/10/23 23:22:24

https://blog.csdn.net/sunrainamazing/article/details/71751043

去除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