4

CSS のみを使用して入力ファイル タイプのスタイルを設定していますが、Firefox 11.0 を期待するすべてのブラウザーで動作します。CSS:

label{ 
 background:url(http://www.itilexamapp.com/images/upload.png) no-repeat 0 0;
 padding:5px;
 display:inline-block;
}

input[type="file"]
{-moz-opacity:0; 
 -webkit-opacity:0; 
 filter:alpha(opacity=0); 
 padding:6px;
 width:200px; 
}

HTML:

<label>
<input type="file" name="file_upload" />
</label>

ここでコードが機能していることを確認できます。

http://jsfiddle.net/kheema/PeXq9/7/

4

3 に答える 3

4

これが解決策です。これをスタイルに追加してください。:

input[type="file"] {opacity: 0;}

Firefox 11 は現在、いくつかのベンダー プレフィックス (ここでは -moz-opacity) を楽しませなくなったと思います。

于 2012-04-04T06:02:33.687 に答える
3

オプションで、次の方法で簡略化できます。

<div id='label'><input type='file' size='1' class='upload'></div>

そしてCSSは次のとおりです。

#label{
  width: 100px;
  height: 50px;
  background: #fff url('YOURUPLOADIMAGE.png') no-repeat;
  }
 .upload{
   opacity: 0;
   font-size: 45px;
  }

もちろん、ブラウザのサポートに対応する必要があります。

于 2012-04-10T13:17:43.620 に答える