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