当前位置：首页 > news >正文

css 设置 input 插入光标样式

news 2025/7/10 10:07:07

caret-color 可以设置光标颜色

caret-color: red;

但只能更改颜色，粗细位置不能更改，可以自定义光标，由于 input不能使用 ::after、::before 伪元素，所以可以用 div 自定义

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Cursor</title>
<style>.custom-cursor {position: relative;padding-left: 5px;caret-color: transparent;display: inline-block;width: 200px;}.custom-cursor:focus::after {content: '';position: absolute;top: 5px;width: 2px; /* 调整这个值来改变光标的“粗细” */height: 63%;background-color: red;animation: blink 0.8s step-end infinite;}.insert-input {display: inline-flex;position: relative;align-items: center;input {padding-left: 6px;caret-color: transparent;}}.insert-cursor {position: absolute;margin-left: 0px;margin-top: -1px;width: 2px; /* 调整这个值来改变光标的“粗细” */height: 68%;background-color: red;opacity: 0;}.insert-input:has(.input-text:focus) {.insert-cursor {margin-left: 5.5px;animation: blink 0.8s step-end infinite;opacity: 1;}}@keyframes blink {from, to { background-color: transparent; }50% { background-color: red;    }}
</style>
</head>
<body>
<div class="custom-cursor" contenteditable="true">在这里输入文本...</div><br>
<div class="insert-input"><span class="insert-cursor"></span><input class="input-text" type="text" autocomplete="off" placeholder="请输入内容">
</div>
</body>
</html>