入力ファイルの参照ボックスを美しくする方法、効果は次のとおりです_html/css_WEB-ITnose

CSS

CSS を使用してこのような効果を記述するにはどうすればよいですか? 専門家、助けてください

ディスカッション (解決策) に返信します

ボックスとボタンを描画します

ボタンのクリック イベントをクリック イベントにバインドしますファイルの onchange イベントによって返されるファイル名を最初のボックスに設定します

jquery を例に挙げます

$("#btn").bind("click", function(e){
$( "#file").trigger("click");
return false;

$("#img-file").bind("change", function(){
//Set取得したファイル名を最初のボックスに追加します


.i-file{ 位置: 不透明度: 0; 幅: 100%; 高さ: 100%; ; left:0; top:0;} ie filter:alpha(...) と互換性のある文をもう 1 つ追加します

.messageTxt scan.fileInputContainer{background:url(images/ここを自分の画像に変更します.jpg) no-repeat 0 8px ;位置:相対;幅:57ピクセル;}

.fileInput{高さ:24ピクセル;オーバーフロー:非表示;フォントサイズ:300ピクセル;位置:絶対;右:0;上:0;不透明度:0;フィルター:アルファ(不透明度= 0) ;cursor:pointer;}

CSS:
.div1
{

border:1pxグレー;

パディング:5px 5px 5px 5px
}
.file
{
border:1px 土グレー
}

ご協力ありがとうございます