CSS模擬input光標的方法

/* 第一步：定義input框 */
input{
border: none;
outline: none;
background: transparent;
font-size: 18px;
padding: 5px 10px;
position: relative;
}
/* 第二步：定義光標 */
input::before{
content: "";
height: 20px;
width: 2px;
background-color: black;
position: absolute;
top: 50%;
transform: translateY(-50%);
animation: cursor 1s infinite;
}
/* 第三步：定義動畫 */
@keyframes cursor{
0%{
left: 0;
opacity: 0;
}
50%{
opacity: 1;
}
100%{
left: 100%;
opacity: 0;
}
}

使用以上代碼便可在input框內模擬出光標的效果。其中，第一步和第二步分別定義了input框和光標的樣式，第三步定義了光標的動畫，讓它在輸入框內無限循環來模擬真正的光標。