入力カーソルが点滅しています

Question

入力カーソルを点滅させる際に問題があります。どのようにアニメーションを作成してカーソル "|"入力フィールド（プレースホルダ）の内部が点滅し続けます。 私が持っているコードは、このです：

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

私はこれも開始する方法については考えています。助言がありますか？

Answer 1

このソリューションをお試しください

<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/

Answer 2

autofocus属性を追加するだけです。リンクhere

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

autofocus属性がboolean属性であるを参照してください。 存在する場合、page loadsの場合、要素が自動的にfocusを取得するように指定します。

Answer 3

使用、次のスタイルのカーソル：自動あなたが

style="cursor:auto" 
style="cursor:crosshair" 
style="cursor:default" 
style="cursor:e-resize" 
style="cursor:help" 
style="cursor:move" 
style="cursor:n-resize" 
style="cursor:ne-resize" 
style="cursor:nw-resize" 
style="cursor:pointer" 
style="cursor:progress" 
style="cursor:s-resize" 
style="cursor:se-resize" 
style="cursor:sw-resize" 
style="cursor:text" 
style="cursor:w-resize" 
style="cursor:wait"