CSS で <input type=”text”> フォーカス時の線(ボーダー)を消す方法

phi phi on css

デフォルトの<input type="text"> にフォーカスした際, ブラウザごとに割り当てられている ボーダースタイルが適応されて表示されてしまいます.

普通に使う分には入力中ってことが明確になるので良いのですが, 何も表示したくないって場面ももちろんありますよね?

そんなときに使えるのが CSS の outline プロパティです!! (border じゃないという点に注意!!)

Demo

[runstant]

Code

やっていることは超簡単♪

まず, outlineborder を 0 にしてボーダーを消しています. そして backgroundtransparent にすることで背景色を透明にすることができます.

これで一見他のテキスト(pタグなど)と見分けがつかないけど編集可能なフィールドを作ることができます. outline を 0 に設定しているのでフォーカスしても変化がないのがわかるかと思います.

input[type="text"] {  
    padding: 2px 4px;
    outline: 0;
    border: 0px;
    background: transparent;
    font-size: 20px;
}