如何移除textarea元素聚焦时内部出现的异常轮廓线

问题原因 #

异常黑线是浏览器对textarea控件的默认渲染效果，内容溢出触发滚动条时，部分浏览器会自带滚动轨道上下边框/内置阴影，再加上原有CSS存在规则冲突、盒模型未明确的问题，共同导致了异常样式。

调整后的CSS代码 #

.f-input {
    color:#333333;
    width: 100%;
    border-radius:4px;
    padding: 5px 20px;
    /* 调整默认边框为透明2px，避免聚焦时尺寸跳动 */
    border: 2px solid transparent;
    font-size: 14px;
    height:38px;
    line-height: 26px;
    /* 新增：盒模型规则，边框算入总宽高 */
    box-sizing: border-box;
    /* 新增：清除浏览器默认表单样式 */
    appearance: none;
    -webkit-appearance: none;
    /* 可选：如果不需要用户拖拽修改textarea尺寸可以加下面一行 */
    resize: none;
}
/* 新增：webkit内核浏览器滚动条样式清除 */
.f-input::-webkit-scrollbar {
    width: 6px;
}
.f-input::-webkit-scrollbar-track {
    background: transparent;
}
.f-input::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}
.f-input:focus{
    border-color: var(--primary);
    outline: none !important;
}

关键调整说明 #

• 清理了原有focus规则中冲突的outline-style: solid冗余代码，避免样式渲染异常
• 新增appearance属性清除浏览器内置的textarea默认样式，直接消除默认黑线根源
• 统一默认和聚焦状态的边框宽度为2px，配合box-sizing: border-box避免聚焦时元素尺寸跳动
• 显式定义滚动条样式，避免不同浏览器对滚动轨道的默认渲染差异

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