使用:focus伪类修改聚焦时边框颜色为#007bff并移除outline；2. 通过transition设置border-color的0.3s平滑过渡；3. 完整样式需包含padding、字号、边框等基础属性，确保动画自然且跨浏览器兼容。

要让输入框在聚焦时边框颜色平滑变化，可以使用 CSS 的 :focus 伪类配合 border-color 和 transition 属性实现。

page-agent 浏览器控制（CDP）

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

下载

1. 使用 :focus 设置聚焦状态样式

当用户点击输入框并获得焦点时，:focus 伪类会被触发。你可以在这个状态下修改边框颜色：

• border-color: #007bff; 将边框颜色改为蓝色
• 确保设置 outline: none 来移除默认的浏览器聚焦轮廓（可选，但常用于自定义样式）

2. 添加过渡效果使颜色变化更自然

直接改变边框颜色会显得生硬，加入 transition 可实现渐变动画：

• transition: border-color 0.3s ease; 表示边框颜色在 0.3 秒内平滑过渡
• 该属性应写在默认状态（未聚焦）中，以确保进入和离开聚焦时都有动画

3. 完整示例代码

以下是一个可以直接使用的完整样式示例：

<input type="text" class="input-style" placeholder="点击我试试">

基本上就这些。只要合理使用 :focus 和 transition，就能轻松实现美观的输入框聚焦动效。注意别忘了测试不同浏览器下的表现，保持兼容性。不复杂但容易忽略细节。