去除input边框

最新推荐文章于 2024-06-03 15:09:24 发布

DN-CS BISHA

最新推荐文章于 2024-06-03 15:09:24 发布

阅读量9.3w

点赞数 6

分类专栏： CSS 文章标签：需求 input-CSS

本文链接：https://blog.csdn.net/sunrainamazing/article/details/71751043

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

DN-CS BISHA

关注

6
点赞
踩
16

收藏

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

去除input的边框去除input获取焦点时的蓝色外边框** 去除input的边框仅仅用border属性，其实是不能满足我们的需求的此外还需要加上outline属性才可以实现我们想要的样式 ** 去除边框的代码 border-width:0; 即可去除相应的周围的边框但是实际，并不能达到我们想要的效果，而appearance:none;也不能达到我们想要的效果。
复制链接

扫一扫