如何通过现代CSS修改Input元素光标（Blinker）的粗细？

嘿，我懂你的困扰——目前CSS还没有专门用来控制光标粗细的caret-width原生属性（虽然有相关提案，但还没被主流浏览器广泛支持），不过我们可以用纯CSS技巧来实现粗光标效果，完全不需要切换到可编辑<span>这类元素。

方案一：用text-shadow模拟粗光标 #

这是最简单、兼容性最好的方法。我们把原生光标设为透明，然后用文本阴影来替代它，阴影的模糊半径就能控制光标的粗细：

.custom-input {
    border: none;
    border-bottom: #eee solid 3px;
    line-height: 2;
    font-size: 36px;
    text-align: center;
    /* 隐藏原生光标 */
    caret-color: transparent;
    /* 用阴影模拟粗光标，第三个值为模糊半径，数值越大光标越粗 */
    text-shadow: 0 0 2px #231F20;
}

你可以调整text-shadow的第三个参数来改变光标粗细，这个方法在Chrome、Firefox、Safari、Edge等现代浏览器都能正常工作，而且不会影响输入内容的显示。

方案二：自定义动画光标（更精准的控制） #

如果你需要固定宽度的实心光标，或者想自定义闪烁节奏，可以结合背景渐变和CSS动画来实现：

.custom-input {
    border: none;
    border-bottom: #eee solid 3px;
    line-height: 2;
    font-size: 36px;
    text-align: center;
    caret-color: transparent;
    /* 用线性渐变创建实心矩形光标 */
    background-image: linear-gradient(#231F20, #231F20);
    background-size: 4px 100%; /* 第一个值为光标宽度，可自定义 */
    background-repeat: no-repeat;
    background-position: center;
    /* 添加经典的闪烁动画 */
    animation: caretBlink 1s step-end infinite;
}

@keyframes caretBlink {
    50% {
        background-image: linear-gradient(transparent, transparent);
    }
}

注意：这个方案的光标是固定在输入框中心的，刚好适配你设置的text-align: center场景。如果需要光标跟随输入文本移动，方案一会更合适。

补充说明 #

虽然没有原生属性直接控制光标粗细，但这两种纯CSS方案已经能满足大多数场景的需求，不需要额外的HTML结构或JavaScript代码。希望能帮到你！

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