フォームのカスタマイズ
01 テキストフィールド
「text」、「email」、「textarea」
- 枠線の変更
- 余白padding
- 横幅サイズなど
CSS
/* 名前とメール
----------------------------------*/
input[type="text"],
input[type="email"] {
border: 1px solid #3366cc;
padding: 10px;
width: 100%;
font-size: 16px;
background-color: #f0f8ff;
}
02 ラジオボタン、チェックボックス
ボタンの色を変える時は「accent-color」
CSS
/* ボタン
----------------------------------*/
input[type="radio"],
input[type="checkbox"] {
margin-left: 20px;
inline-size: 1.1rem;
block-size: 1.1rem;
accent-color:red;
}
03 セレクトボックス
セレクトボックスのデザインはテキストフィールドと同じようにCSSでデザインできます
CSS
/* セレクト
----------------------------------*/
select{
padding: 8px;
border: 1px solid #3366cc;
width: 70%;
}
04 送信ボタン
HTML
<input type="submit" value="送信する" class="button">
CSS
/* ボタン
----------------------------------*/
.button {
display : inline-block;
border-radius : 5px;
text-align : center;
cursor : pointer;
padding : 12px 12px;
background : #00bfff;
color : #ffffff;
border : 2px solid #3366cc;
}
.button:hover {
background : #ff8c00;
}
リセットボタンもCSSでデザインしてみよう！！