在网页开发中，textarea输入框默认在获得焦点也就是被点击时，会触发浏览器自带的focus状态样式，通常表现为边框颜色变化、出现蓝色的轮廓线，很多时候这和我们原本设计的输入框样式不匹配，需要手动调整让textarea点击时保持原样。
textarea点击样式变化的原因
浏览器为了提升可访问性，会给获得焦点的表单元素添加默认的样式反馈，textarea的默认focus样式主要来自两个CSS属性：border和outline。不同浏览器的默认样式略有差异，但核心都是这两个属性在focus状态下被浏览器赋予了新的值。
默认样式的影响
如果我们原本给textarea设置了自定义的边框样式，点击时浏览器会覆盖原本的border属性，或者添加outline轮廓，导致输入框外观发生变化，破坏页面的整体设计一致性。
让textarea点击保持原样的实现方法
核心思路
我们只需要针对textarea的:focus伪类，重新设置border和outline属性，覆盖浏览器的默认规则即可。如果需要完全保持点击前后的样式一致，直接把focus状态的样式设置为和默认状态相同就可以了。
基础实现代码
下面的代码演示了如何让一个自定义样式的textarea在点击时保持边框和轮廓不变：
/* 自定义textarea的基础样式 */
.custom-textarea {
width: 300px;
height: 150px;
padding: 10px;
border: 1px solid #cccccc;
border-radius: 4px;
font-size: 14px;
/* 先清除默认的outline，避免后续冲突 */
outline: none;
}
/* 针对focus状态的样式设置，和默认样式保持一致 */
.custom-textarea:focus {
border: 1px solid #cccccc;
outline: none;
}
HTML结构对应代码
对应的HTML结构如下，注意<textarea>标签的class要和上方的CSS选择器匹配：
<textarea class="custom-textarea" placeholder="请输入内容"></textarea>
特殊场景的处理
需要保留轻微反馈的情况
如果我们不想完全取消点击反馈，只是想让反馈样式符合设计需求，可以调整focus状态的border颜色，比如改成品牌色，而不是使用浏览器默认的蓝色：
.brand-textarea {
width: 300px;
height: 150px;
padding: 10px;
border: 1px solid #e0e0e0;
border-radius: 4px;
outline: none;
transition: border-color 0.2s;
}
.brand-textarea:focus {
/* 点击时边框变成品牌色，没有默认轮廓 */
border: 1px solid #ff6b00;
outline: none;
}
兼容旧版本浏览器
部分旧版本浏览器对:focus伪类的支持有差异，如果需要兼容，可以给textarea添加onfocus和onblur事件来手动控制样式，不过这种方式不如CSS伪类简洁，优先推荐使用CSS方案：
<textarea
style="width:300px;height:150px;border:1px solid #ccc;outline:none;"
onfocus="this.style.border='1px solid #ccc'"
onblur="this.style.border='1px solid #ccc'"
></textarea>
注意事项
- 设置
outline: none的时候要注意，完全取消轮廓可能会影响键盘导航用户的使用体验，如果页面需要支持无障碍访问，建议保留轻微的轮廓样式或者使用其他明显的反馈方式。 - 如果页面中使用了CSS框架比如Bootstrap，可能需要提高自定义样式的优先级，比如在选择器前添加父元素的class，或者使用
!important来覆盖框架的默认focus样式。 - 修改focus样式后，建议在不同浏览器中测试效果，确保样式表现一致，避免出现部分浏览器仍然显示默认轮廓的问题。