【CSS/html】inputテキストボックスの背景色を変える方法

↓htmlの標準のテキストボックスは背景色が真っ白で入力できることがわかりにくいです。

「テキストボックスをグレーにして入力できることがわかるようにしたい！」

テキストボックスの色を変える方法を解説します。

【背景色を変える】background

backgroundは背景を指定するCSSです。

これにカラーコードを指定すると指定した色になります。

<style>
.example{
    background: #EEE;
}
</style>
<input type="text" value="テキストボックス" class="example">

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

背景色はグレーを使うことが多いです。グレーのカラーコードについてはこちら↓

【枠線を変える】border

標準の枠線は少し太いのと上左と右下で微妙に色が違っていてダサいです。

borderを指定すると枠線を変えることができます。

borderには線の太さ、種類、色を指定します。

<style>
.example2{
    /*追加*/border: 1px solid #999;
    background: #EEE;
}
</style>
<input type="text" value="テキストボックス" class="example2">

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

【余白を増やす】padding

テキストボックスの余白がないと窮屈な印象を与えたり、そもそも押しづらいものです。

paddingを指定すると枠線と文字の間の余白を取ることができます。

値は上下、左右で指定できます。

テキストには上下にスペースがあるため、左右の余白を多めにとるとバランスがよくなります。

<style>
.example3{
    /*追加*/padding: 5px 10px;
    border: 1px solid #999;
    background: #EEE;
}
</style>
<input type="text" value="テキストボックス" class="example3">

【横幅を変える】width

widthは横幅を指定するCSSです。

<style>
.example4{
    /*追加*/width: 100%;
    /*追加*/box-sizing: border-box;
    padding: 5px 10px;
    border: 1px solid #999;
    background: #EEE;
}
</style>
<input type="text" value="テキストボックス" class="example4">

テキストボックスの横幅変更について詳しくはこちら↓

【まとめ】テキストボックスの色を変える方法

• 【背景色を変える】background
• 【枠線を変える】border
• 【余白を増やす】padding
• 【横幅を変える】width

以上、テキストボックスの色を変える方法でした。