如何通过CSS修改文本输入框点击聚焦时的下划线样式

点击文本输入框时出现的绿色下划线，是输入框聚焦状态的激活样式，根据下划线的实现方式，对应覆盖方法如下：

• 通用场景（90%以上的情况）：下划线为输入框底部边框
  原生表单、多数轻量UI组件的输入框分割线都是通过border-bottom实现，聚焦时会自动切换边框色，直接覆盖聚焦状态样式即可：

  /* 匹配所有type为text的输入框聚焦状态 */
  input[type="text"]:focus {
    /* 可选：移除浏览器默认的外发光轮廓，觉得突兀就加，不需要可以删 */
    outline: none;
    /* 把底部边框改成紫色，后面的色值可以替换成你项目主色对应的紫色值 */
    border-bottom: 2px solid #7c3aed;
    /* 可选：加个0.2秒的过渡动画，颜色切换不会太生硬 */
    transition: border-color 0.2s ease;
  }
  

• 特殊场景：下划线由内阴影实现
  部分组件库为了避免边框改变元素盒模型尺寸，会用box-shadow模拟底部下划线，如果改border属性没生效，就覆盖阴影属性：

  input[type="text"]:focus {
    outline: none;
    /* 用底部阴影模拟紫色下划线 */
    box-shadow: 0 2px 0 0 #7c3aed;
  }
  

排查小技巧：按F12打开浏览器开发者工具，用元素选择器选中目标输入框，在样式面板里强制勾选:focus状态，就能直接看到绿色效果对应的CSS属性，直接改对应的值为紫色即可，不用猜是哪个属性生效。

如果需要同时覆盖密码框、邮箱框、多行文本域等其他表单控件的聚焦样式，把选择器换成input:focus, textarea:focus就行。

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