はじめに
HTMLのフォーム要素のボタンのデザインを変更する方法を紹介していく。
フォーム要素を直接デザインするのではなく
label要素を使ってデザインする。
デフォルト
まずデフォルトのフォームデザインこれのボタンを変更していく。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form method="post" enctype="multipart/form-data">
<input name="test" id="test" type="file">
</form>
</body>
</html>
label要素を使って
コードを一部分だけ抜粋。
input要素のスタイルを無効にしえてをlabelで囲って
labelに対してcssを適用させる。
<label> ファイルを選択 <input name="test" id="test" type="file" style="display:none;"> </label>
全体のコードはいかの通り。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
label {
display: inlin-block;
padding: 0.3em 1em;
color: #67c5ff;
text-decoration: none;
border: solid 2px #67c5ff;
border-radius: 5px;
}
</style>
</head>
<body>
<form method="post" enctype="multipart/form-data">
<label>
ファイルを選択
<input name="test" id="test" type="file" style="display:none;">
</label>
</form>
</body>
</html>
結果は以下のスクショ。ボタンのデザインが変更出来ている。
