input去除蓝色边框

最新推荐文章于 2024-05-05 18:05:22 发布

方形裤子的黄方块

最新推荐文章于 2024-05-05 18:05:22 发布

阅读量529

点赞数

分类专栏： HTML 文章标签： html5

本文链接：https://blog.csdn.net/weixin_46449470/article/details/107007528

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

input标签在使用的时候会有边框样式。当input聚焦的时候又会显示出一个蓝色边框。
在这里插入图片描述

很多时候我们并不需要这种默认样式的边框，就需要去除边框。
给需要去除的标签添加css样式：
border: none; 去除input默认的边框
outline:none; 去除聚焦时的蓝色边框
outline-width:0 去除聚焦时的蓝色边框

或者直接 input:focus { outline: none; }去除所有input的聚焦边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input{
             border: 1px solid red;   
             border-radius: 3px;
             padding-left: 5px;
            /* border: none; 去除input默认的边框    */
            /* outline:none;  去除聚焦时的蓝色边框  */
            /* outline-width:0 去除聚焦时的蓝色边框     */
        }
         input:focus { outline: none; }        
    </style>
</head>
<body>
    <input type="text"><button>提交数据</button>
</body>
</html>

修改后：
在这里插入图片描述

方形裤子的黄方块

关注

0
点赞
踩
1

收藏

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

input标签在使用的时候会有边框样式。当input聚焦的时候又会显示出一个蓝色边框。很多时候我们并不需要这种默认样式的边框，就需要去除边框。给需要去除的标签添加css样式：border: none; 去除input默认的边框outline:none; 去除聚焦时的蓝色边框outline-width:0 去除聚焦时的蓝色边框或者直接 input:focus { outline: none; }去除所有input的聚焦边框<!DOCTYPE html><html lan
复制链接

扫一扫