HTML・CSSでつくるテキストボックス(テキストエリア)のデザイン5選

2022/12/172022/12/18

お問合せフォームなどを実装するには必須になってくる、テキストボックス(テキストエリア)のデザインをまとめました。全てのパーツがコピペ可能で、色・幅・角丸・文字サイズなどの調整も可能になっています。

シンプルなテキストボックス

枠線付き

<label>
    <span class="textbox-001-label">ラベルの例</span>
    <input type="text" class="textbox-001" placeholder="テキストボックスの例"/>
</label>

.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;
}

背景色付き

<label>
    <span class="textbox-003-label">ラベルの例</span>
    <input type="text" class="textbox-003" placeholder="テキストボックスの例"/>
</label>

.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;
}

薄めの枠線と背景色付き

<label>
    <span class="textbox-002-label">ラベルの例</span>
    <input type="text" class="textbox-002" placeholder="テキストボックスの例"/>
</label>

.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;
}

ダークモード用テキストボックス

枠線付き

<label>
    <span class="textbox-004-label">ラベルの例</span>
    <input type="text" class="textbox-004" placeholder="テキストボックスの例"/>
</label>

.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;
}

背景色付き

<label>
    <span class="textbox-005-label">ラベルの例</span>
    <input type="text" class="textbox-005" placeholder="テキストボックスの例"/>
</label>

.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);
}