ホームへ

【CSS】inputテキストボックスの枠線を消す方法

テキストボックスには下記のようにデフォルトで線がついています。

<input type="text" value="テキストボックス">

この線を消す方法を紹介します。

また、この線を消してもフォーカス時に枠線が出る場合があるため、その枠線を消す方法も紹介します。

【通常時の線を消す】border:none

border:noneを指定すると通常時の線が消えます。

<style>
.example{
    /*コレ*/border: none;
    background: #e7edf8;
}
</style>
<input type="text" value="テキストボックス" class="example">

borderについて詳しくはこちら↓

CSS border(枠線)の使い方と種類一覧
CSS borderおよびborderに関連するCSSプロパティの種類一覧を実例とともに紹介します。
この記事を読む

ただし、この状態でフォーカスすると（入力しようとすると）線が現れます（ブラウザによる）。

フォーカス状態の線も消しましょう。

【フォーカス時の線を消す】outline:none

outline:noneを指定するとフォーカス時の線が消えます。

<style>
.example2{
    /*コレ*/outline: none;
    border: none;
    background: #e7edf8;
}
</style>
<input type="text" value="テキストボックス" class="example2">

outlineはborderの外側に線を引くCSSです。

【まとめ】テキストボックスの枠線を消す方法

  • 【通常時の線を消す】border:none
  • 【フォーカス時の線を消す】outline:none

以上、inputテキストボックスの枠線を消す方法でした。

マンガで読める関連記事