HTML5のfileタグをcssでいけてるデザインに変更してみる

from周りをコーディングする際、毎回HTML5のfileのデフォルトのデザインがダサすぎて、デザインをしたくなります。その度に、fileタグのコーディングの仕方を忘れるので備忘録代わりにメモ。

 

以下のソースコードにcssをあてていく

 

<div class="original_width">
    <label>
        <div class="original_file original_form">写真追加</div>
        <input type="file" id="file_up">
    </label>
</div>

 

 

.original_width で全体の横幅、縦幅調整を行う

 

.original_width {
	position: relative;
	width: 200px;
	height: 200px;
}

 

 

label .original_file で親要素の大きさに合わせる+少しデザイン

 

label .original_file {
	position: absolute;
	top: 0; 
	right: 0; 
	bottom: 0; 
	left: 0; 
	display: flex; 
	align-items: center; 
	justify-content: center;
	color: gray;
	background: rgba(242,242,242,0.5);
	border: 2px dashed #CCCCCC; cursor: pointer;
}

 

 

input file を打ち消す

 

#file_up {
	display: none;
}

 

 

形をつけたい場合(丸型)

 

.original_form {
	border-radius: 50%;
}