消除textarea输入框点击时的样式变化

很多用户在使用文本输入框时，可能会遇到点击后输入框会发生样式变化，例如出现蓝色边框或加粗等情况。这通常是<a style="color:#f60; text-decoration:underline;" title="浏览器" href="https://m.php.cn/zt/16180.html" target="_blank">浏览器</a>默认样式导致的，影响用户体验。那么，如何去除这种默认的样式变化呢？

这个问题的核心在于如何消除浏览器为元素赋予的默认焦点样式。 许多开发者都希望在用户点击输入框时，保持其外观的一致性，避免突兀的样式变化。

解决方法很简单，只需要通过css样式来覆盖浏览器的默认样式即可。 具体来说，我们可以使用 outline: none; 这个样式属性。

page-agent 浏览器控制（CDP）

使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载

将 outline: none; 添加到元素的样式中，就能有效地去除点击时产生的边框加粗等效果。 例如：

textarea {
  outline: none;
}

这样，无论用户如何点击输入框，它都将保持原有的样式，不会出现任何颜色或加粗的变化，从而提供更简洁、更一致的用户界面。