入力ファイルタイプのCSSスタイリング

CSSのみを使用して入力ファイルタイプをスタイリングしており、Firefox 11.0を期待するすべてのブラウザで機能します。 CSS：入力ファイルタイプの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/~~

出典

2012-04-04 Kheema Pandey

お願いします*してください*これ以上何もしません。一つのこととして、すべてのブラウザがそういうことをするとは思わないでしょう。あなたのコードはIE8のような古いブラウザでどのように動作しますか？モバイルブラウザではどのように動作しますか？あなたが知らないブラウザではどのように動作しますか？ –

[Styling ]（http://stackoverflow.com/questions/4532733/styling-input-type-file） –

ところで、重複の*ロット*があります。とてもたくさん。 –

ここでは、あなたのスタイルにこれを追加し、ソリューションです。：

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

Firefox 11はベンダープレフィックス（ここでは-moz-opacity）の一部を楽しまなくなったと思います。

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

とCSSビーイング：

出典

2012-04-04 06:02:33

おかげさまで、あなたは正しいです。 –

あなたの助けてくれてありがとうTEA_Totaler :) –

オプションでは、あなたがそれを簡略化することができもちろん

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

、あなたはブラウザのサポートのためにaccomadateする必要があります。

出典

2012-04-10 13:17:43

入力ファイルタイプのCSSスタイリング

答えて

関連する問題