input标签不显示边框，或只在点击时不显示边框

2024年4月26日 131次阅读 来源: bzhwlp

input标签不显示边框

(1)不显示边框

在样式中直接写：border-style: none;

.search-input-box { 
            width: 1040px;
            height: 22px;
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            line-height: 22px;
            outline: none;
            margin: 6px 120px 0px 0px;
            border-style: none;
        }

<input class="search-input-box" type="text">

(2)只在点击时不显示边框

:focus 伪类选择器

input:focus { 
            border-style: none;
            outline: none; //好像是outline起主要作用
        }

像这种问题一般都用在 :focus 伪类选择器 ，用于选取获得焦点的表单元素，焦点也即是光标。
 一般情况下 input 类表单元素才能获取:focus伪类选择器。
 outline设置轮廓的样式，样式是 none时，轮廓不会出现。

    原文作者：bzhwlp
    原文地址: https://blog.csdn.net/qq_45863496/article/details/121264371
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞