99%的人都不知道的一个CSS技巧,如何控制Input框光标的粗细,现在给大家分享一下

3,256 阅读1分钟

问题

注意到这两张图片的区别了吗?它们的光标粗细不一致,对于追求细节的开发者来说,可能更倾向于后面一种,因为它更贴近原生。

原因

为什么粗细会不一样?直接上结论:光标距左屏幕的px数值如果为整数则显示细光标,否则为粗光标。

解决

想要细的光标?只要保证光标距离左屏幕的px数值为整数即可。如采用rem或者百分比布局,尽管有小数的值,但我们只需要保证它们加起来的结果为整数即可,比如:input框左边有两个元素A和B,A宽度10.5px,B宽9.5px,它们加起来为20px,所以input框的光标表现为细。最后,想要细的光标,建议的各位都采用px布局。

最后

我的github账户,可以关注一下。