去除input边框

最新推荐文章于 2024-04-25 10:51:54 发布

NRlovestudy

最新推荐文章于 2024-04-25 10:51:54 发布

阅读量5.5k

点赞数 1

分类专栏：前端

前端专栏收录该内容

105 篇文章 0 订阅

订阅专栏

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

NRlovestudy

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
去除input边框

https://blog.csdn.net/sunrainamazing/article/details/71751043去除input的边框仅仅用border属性，其实是不能满足我们的需求的此外还需要加上outline属性才可以实现我们想要的样式 **去除边框的代码 border-width:0; 即可去除相应的周围的边框但是实际，并不
复制链接

扫一扫