入力を透明にするための純粋なCSS方法はありますか？

Question

この入力を透明にするにはどうすればよいですか？

<input type="text" class="foo"> 

私はこれを試しましたが、うまくいきません。

background:transparent url(../img/transpSmall.png) repeat scroll 0 0; 

Answer 1

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

誰もそれがあると知っているんだろう。

Answer 2

は私がnoneにoutlineプロパティを設定し、この

input[type="text"] 
{ 
    background: rgba(0, 0, 0, 0); 
    border: none; 
    outline: none; 
} 

をしたい、前述の2つの方法が、今日は十分ではありませんカーソルが

Answer 3

に入ったときのボックスをハイライトからブラウザを停止します。私はpersonnally使用：

input[type="text"]{ 
    background-color: transparent; 
    border: 0px; 
    outline: none; 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    box-shadow: none; 
    width:5px; 
    color:transparent; 
    cursor:default; 
} 

それはまた、いくつかのブラウザでシャドウ・セットを削除し、入力すると、入力がなかったかのように動作カーソルを作ることができるテキストを隠します。

また、幅を0pxに設定することもできます。

Answer 4

不透明度を0に設定しました。これで消えましたが、クリックすると機能します。

Answer 5

outlineまたは:focusのスタイルは、原則として完全に削除しないでください。適切なフォールバックせずに使用して

https://a11yproject.com/posts/never-remove-css-outlines

... outline: noneは、任意のキーボードのみのユーザー、弱視とするだけでなく、それらにあなたのサイトが大幅に少ないアクセスできるようになります。インタラクティブな要素にフォーカスの目安を常に与えてください。