本文讲述了如何在textarea聚焦时改变边框颜色以提高用户体验。原本使用outline属性实现，但由于浏览器兼容性和样式问题，转向使用border和box-shadow。对于由div包裹的输入框，通过JavaScript监听focus和blur事件来改变边框颜色，尽管尝试过用CSS解决，但最终未能实现。
背景
之前做了一个网页，网页中的所有输入框都被设计为“获得鼠标焦点时外边框不变蓝”。突然某一天，产品觉得这样用户体验不好，不能很明显地告诉用户当前鼠标停在哪里，于是要求改为“当输入框获得鼠标焦点时，外边框自动变蓝；失去焦点时外边框恢复原样”。
浏览器自动会给输入框input、textarea的outline 属性设置一个默认值，效果就是当输入框获得鼠标焦点时外边框会自动带上颜色，失去焦点时外边框颜色消失。由于不同浏览器outline 属性的默认值不同，导致外边框的颜色也不同。如果不想要浏览器的outline默认设置，只需要将 outline 属性设置为none 即可。
所以一开始听到这个需求，感觉特别简单，不就是纯 CSS 的问题嘛！我只要将所有输入框的 outline 属性设置为浏览器默认的值就好了，但我想的太天真了。。。。
1、如何复制浏览器默认的 outline 样式
由于网页中已有的输入框的样式遍布在各个文件中，有一种非常机械的办法，那就是到每个文件中去删除掉输入框的 outline：none样式，这样输入框就会使用浏览器默认的 outline 样式了。但是这样做要改的地方太多了，会疯掉的！再想想有没有更省事的方法，有了！在最基本的base.css样式文件中给输入框添加一个focus时候的outline样式不就解决了么。那么问题来了，该将outline 设置何值，才能自动使用浏览器默认的outline样式呢？
我第一个想到的方法是将 outline设置为auto，但发现只有webkit 内核的浏览器才支持这个属性值，firefox 不支持，因为auto 并不是标准的outline 值。所以要想直接复
最低0.47元/天 解锁文章
扫一扫
318
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
