65日目

2919 ワード
テキストリンク

(input type="file")ファイルアップロードボタンCSS


[ファイル](File)フィールドのデザインは、選択したファイル名を表示する部分と[アップロード](Upload)ボタンが組み合わされているため、ブラウザによって異なります.また、スタイルにCSSを適用すると、内部ボックスに影響を与えるものもあれば、外部ボックスにのみ影響を与えるものもあります.
出典:https://webdir.tistory.com/435[WEBビット]

ブラウザ固有のデフォルトファイルフィールドの外観
ファイルアップロードに関連するプラグインの多くは、機能と設計を改善しています.可能であれば、使用してください.次に、基本的なファイルフィールドの設計と機能を模倣することについて説明します.

ファイルフィールドボタンデザイン


基本構造は以下の通りです.
<div class="filebox">
	<label for="ex_file">업로드</label>
	<input type="file" id="ex_file">
</div>
  • インタラクションのために、lable要素のfor属性をinput要素のid値と一致させる.
  • 選択したファイルの名前を表示するには、ボタンのみで表示し、追加のコードも必要です.
    CSSは以下の通りです.
    • .filebox label {
	display: inline-block;
	padding: .5em .75em;
	color: #999;
	font-size: inherit;
	line-height: normal;
	vertical-align: middle;
	background-color: #fdfdfd;
	cursor: pointer;
	border: 1px solid #ebebeb;
	border-bottom-color: #e2e2e2;
	border-radius: .25em;
}

.filebox input[type="file"] { /* 파일 필드 숨기기 */
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip:rect(0,0,0,0);
	border: 0;
}
    ラベルデザインがほしいので、それを使って装飾すればいいです.
    [伯俊]5427火(金貨4)
    現在のシステムのデフォルトのエンコードでファイルに書き込む