css 输入光标 Flink

ffdz8vbo 于 2023-11-19 发布在 Flink

关注(0)|答案(3)|浏览(176)

我在使输入光标 Flink 时遇到了麻烦。如何制作光标“|“在输入字段（占位符）内不断 Flink 。我的代码是这样的：

<input type="text" class="rq-form-element" placeholder="|"/>

字符串
我不知道怎么开始。有什么建议吗？

css

来源：https://stackoverflow.com/questions/42481586/input-cursor-that-is-blinking

3条答案

按热度按时间

jgovgodb1#

只需添加autofocus属性。请参阅链接here

<input type="text" class="rq-form-element" autofocus/>

字符串
autofocus属性是一个boolean属性。当存在时，它指定当page loads时，元素应该自动获取focus。

赞(0）回复(0）举报 2023-11-19

j0pj023g2#

试试这个解决方案

<div class="cursor">
<input type="text" class="rq-form-element" />
<i></i>
</div>

字符串
CSS

.cursor {
    position: relative;
}
.cursor i {
    position: absolute;
    width: 1px;
    height: 80%;
    background-color: gray;
    left: 5px;
    top: 10%;
    animation-name: blink;
    animation-duration: 800ms;
    animation-iteration-count: infinite;
    opacity: 1;
}

.cursor input:focus + i {
    display: none;
}

@keyframes blink {
    from { opacity: 1; }
    to { opacity: 0; }
}

型
现场演示-https://jsfiddle.net/dygxxb7n/

赞(0）回复(0）举报 2023-11-19

o75abkj43#

不知道这是不是你要找的，但你可以设置