文本输入框边框问题求助：设置border:none后边框仍存在

你写的CSS已经处理了基础的边框和外轮廓，但有些浏览器会给聚焦状态的输入框添加额外样式（比如box-shadow），或者存在继承样式干扰，试试下面的代码：

.input{
    background: transparent;
    font-size: 100%;
    color: rgb(0, 91, 65);
    outline: none;
    border: none;
    /* 移除浏览器默认的聚焦阴影（视觉上类似边框） */
    box-shadow: none;
    /* 重置表单元素默认样式，消除浏览器差异 */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.input::placeholder{
    color: rgb(0, 91, 65);
}

.input:hover{
    cursor: text;
}

/* 强制确保聚焦状态下无任何边框类样式 */
.input:focus{
    outline: none;
    border: none;
    box-shadow: none;
}

关键调整说明： #

• box-shadow: none：Chrome等浏览器在输入框聚焦时会默认添加阴影效果，视觉上和边框难以区分，必须显式移除。
• appearance系列属性：消除不同浏览器对表单元素的默认样式差异，避免出现意外的边框或装饰性样式。
• 单独定义.input:focus：防止聚焦状态下触发浏览器默认的高亮样式，同时避免被其他优先级更高的CSS规则覆盖。

如果问题仍存在，可以检查输入框的父元素是否设置了边框，或者是否有更具体的CSS选择器（比如带ID的选择器）覆盖了你的.input样式。

内容的提问来源于stack exchange，提问作者Nikuzo