5 designs for text boxes (text areas) created with HTML/CSS
We have summarized the design of text boxes (text areas) that are essential when implementing forms. All parts can be copied and pasted, and you can also adjust the color, width, rounded corners, font size, etc.
Simple Textbox
With border
Adjust design
Copy HTML
<label>
<span class="textbox-1-label">ラベルの例</span>
<input type="text" class="textbox-1" placeholder="テキストボックスの例"/>
</label>
Copy 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;
}
With background color
Adjust design
Copy HTML
<label>
<span class="textbox-3-label">ラベルの例</span>
<input type="text" class="textbox-3" placeholder="テキストボックスの例"/>
</label>
Copy 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;
}
With border & background color
Adjust design
Copy HTML
<label>
<span class="textbox-2-label">ラベルの例</span>
<input type="text" class="textbox-2" placeholder="テキストボックスの例"/>
</label>
Copy 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;
}
Dark Textbox
With border
Adjust design
Copy HTML
<label>
<span class="textbox-4-label">ラベルの例</span>
<input type="text" class="textbox-4" placeholder="テキストボックスの例"/>
</label>
Copy 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;
}
With background color
Adjust design
Copy HTML
<label>
<span class="textbox-5-label">ラベルの例</span>
<input type="text" class="textbox-5" placeholder="テキストボックスの例"/>
</label>
Copy 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);
}