input type=fileのデザインを変更する

input type=fileのデザインをボタンの形に変更してみます。

サンプルコード

input type=fileをlabelタグで括り、labelタグにスタイルを指定します。

HTML

<label for="file" class="file-btn">
	アップロード
	<input type="file" id="file" />
</label>

CSS

.file-btn {
	display: inline-block;
	position: relative;
	padding: 8px 12px;
	border-radius: 5px;
	color: #ffffff;
	background: #3498DB;
	cursor: pointer;
}
.file-btn:focus-within {
	outline: 2px solid black;
}
.file-btn input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

input type=fileのデザイン変更のデモページ
　

【参考サイト】

• [HTML5] <input type=”file”>のデザインをもっと簡単に変更 – Qiita