HTML・CSSでつくるテキストボックス(テキストエリア)のデザイン5選
フォームを実装する際に必須になってくるテキストボックス(テキストエリア)のデザインをまとめました。全てのパーツがコピペ可能で、色・幅・角丸・文字サイズなどの調整も可能になっています。
シンプルなテキストボックス
枠線あり
デザインを調整する
HTMLをコピペする
<label>
<span class="textbox-1-label">ラベルの例</span>
<input type="text" class="textbox-1" placeholder="テキストボックスの例"/>
</label>
CSSをコピペする
.textbox-1-label,
.textbox-1 {
color: #333;
}
.textbox-1-label {
display: block;
margin-bottom: 5px;
font-size: .9em;
}
.textbox-1 {
width: 100%;
padding: 8px 10px;
border: 1px solid #969da3;
border-radius: 3px;
font-size: 1em;
line-height: 1.5;
}
.textbox-1::placeholder {
color: #999;
}
背景色あり
デザインを調整する
HTMLをコピペする
<label>
<span class="textbox-3-label">ラベルの例</span>
<input type="text" class="textbox-3" placeholder="テキストボックスの例"/>
</label>
CSSをコピペする
.textbox-3-label,
.textbox-3 {
color: #333;
}
.textbox-3-label {
display: block;
margin-bottom: 5px;
font-size: .9em;
}
.textbox-3 {
width: 100%;
padding: 8px 10px;
border: none;
border-radius: 3px;
background: #f7f7f7;
font-size: 1em;
line-height: 1.5;
}
.textbox-3::placeholder {
color: #999;
}
枠線 & 背景色あり
デザインを調整する
HTMLをコピペする
<label>
<span class="textbox-2-label">ラベルの例</span>
<input type="text" class="textbox-2" placeholder="テキストボックスの例"/>
</label>
CSSをコピペする
.textbox-2-label,
.textbox-2 {
color: #333;
}
.textbox-2-label {
display: block;
margin-bottom: 5px;
font-size: .9em;
}
.textbox-2 {
width: 100%;
padding: 8px 10px;
border: 1px solid #d2d2d2;
border-radius: 3px;
background: #f7f7f7;
font-size: 1em;
line-height: 1.5;
}
.textbox-2::placeholder {
color: #999;
}
ダークモード対応テキストボックス
枠線あり
デザインを調整する
HTMLをコピペする
<label>
<span class="textbox-4-label">ラベルの例</span>
<input type="text" class="textbox-4" placeholder="テキストボックスの例"/>
</label>
CSSをコピペする
.textbox-4,
.textbox-4-label {
color: #e5e5e5;
}
.textbox-4-label {
display: block;
margin-bottom: 5px;
font-size: .9em;
}
.textbox-4 {
width: 100%;
padding: 8px 10px;
border: 1px solid #555;
border-radius: 3px;
background-color: transparent;
font-size: 1em;
line-height: 1.5;
}
.textbox-4:focus{
outline: 1px solid #fff;
}
.textbox-4::placeholder {
color: #666;
}
背景色あり
デザインを調整する
HTMLをコピペする
<label>
<span class="textbox-5-label">ラベルの例</span>
<input type="text" class="textbox-5" placeholder="テキストボックスの例"/>
</label>
CSSをコピペする
.textbox-5,
.textbox-5-label {
color: #e5e5e5;
}
.textbox-5-label {
display: block;
margin-bottom: 5px;
font-size: .9em;
}
.textbox-5 {
width: 100%;
padding: 8px 10px;
border: none;
border-radius: 3px;
background-color: #24282e;
font-size: 1em;
line-height: 1.5;
}
.textbox-5:focus{
outline: 1px solid #fff;
}
.textbox-5::placeholder {
color: rgba(255,255,255,.5);
}