入力背景を透明にして点滅するカーソルを表示しますか？

Question

input[type="text"] { 
 
    background: transparent; 
 
    border: none; 
 
}

<input type="text" name="fname" autofocus />

私は透明な背景を持つ入力フィールドを作成しようとするが、それでもユーザーがどこタイプに知っているので、それが点滅するカーソルを表示していています。私は近いですが、それは完璧ではない：

• はHTML：負荷にカーソルを点滅させます。ただし、これは電話機では機能しません。画面をクリックすると停止します。

• CSSは：（クリックされたとき、青枠を色あせた。しかし、まだ葉？）背景を透明にし

このまたは何私のコードを修正するための最良の方法だを行うには良い方法はありますか？

Answer 1

ポイント1の場合、フィールドに常に偽のカーソルを表示したい場合は、jsまたはcssアニメーションで何か創造的なことをする必要があります。

入力フィールドにフォーカスがない場合でも点滅するカーソルがあると、ユーザーエクスペリエンスが損なわれることをご理解ください。

ポイント2については、focusのアウトラインを削除してください。

input[type="text"] { 
 
    background: transparent; 
 
    border: none; 
 
} 
 

 
input[type="text"]:focus { 
 
    outline: none; 
 
}

<input type="text" name="fname" autofocus />

Answer 2

あなたは正しい方向に向かっています。ただoutline: none;プロパティをinput[type=text]に追加すると、枠線のない透明な入力フィールドが表示されます。点滅するカーソルはまだそこにあります。

ここで変更したスニペットです：

input[type="text"] { 
 
    background: transparent; 
 
    border: none; 
 
    outline: none; 
 
}

<input type="text" name="fname" autofocus />

Answer 3

があなたのCSSコードに

outline:0; 

を追加色あせた境界線を避けるために、クライアントのデバイスがオンに焦点を当てることを確認しますフィールドをタップするかクリックしてページヘッダーにjQueryを追加し、JavaScriptに次のコードを追加します。

$(document).click(function(e) { 
$("[name=fname]").focus(); 
}); 

このヘルプが必要です。