さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【CSS】<input type=”file”>のボタンを画像に変える

Pocket
LINEで送る

<input type=”file”>のボタンを画像に変えて、選択したファイルパスをテキストエリアに表示する方法。

html

<label for="fileUp1" class="fileUp">
	選択されていません。
	<input type="file" name="fileUp1" id="fileUp1" onchange="uv.style.display='inline-block'; uv.value = this.value;">
	<input type="text" id="uv" class="uploadValue" disabled />
</label>
<input type="button" value="ファイルを削除" class="fileDel">
	
</div><!--/#wrapper-->
<script>
	$(document).ready(function(){
		$(".fileDel").on('click', function() {
			$(".fileUp input").val('');
			$("#uv").hide();
		});
	});
</script>

scss

label.fileUp {
	position: relative;
	height: 30px;
	line-height: 25px;
	display: block;
	padding-left: 120px;
	font-size: 16px;

	&:before {
		position: absolute;
		top: -3px;
		left: 0;
		width: 110px;
		height: 30px;
		content: "";
		background: url(img/button.png) no-repeat 0 0;
		background-size: cover;
		z-index: 2;
	}

	input[type="file"] {
		position: absolute;
		left: -9999px;
	}

	.uploadValue {
		display: none;
		background: #fff;
		position: absolute;
		top: -3px;
		left: 120px;
		width: auto;
		z-index: 2;
		width: auto;
		height: 30px;
		border: 1px solid #ccc;
		box-sizing: border-box;
		padding: 5px;
	}
}

「ファイルを削除」ボタンクリックで、選択したファイルをキャンセルできます。

カテゴリー:HP制作, css

コメントを残す

コメント内容