2011-12-14 12 views
1

ユーザーを保護するために、実際にCSSでアップロードをスタイルすることはできません。だから、解決策は、実際のアップロードを隠し、ユーザーにあなたが望むように見える他の要素を表示することです。CSSを使用してアップロード入力のスタイルを設定するにはどうすればよいですか?

単純なボタンなどの上に不可視のリアルアップロードをマスクして、ボタンのスタイルを設定する方法を示しますが、ユーザーにアップロード入力をクリックさせる方法を示します。

しかし、問題は、実際の入力がボタンの上に浮かんでいるので、ホバー状態を動作させることができないことです。

この問題は間違っていますか?あなたはどのように入力をアップロードするのですか?

答えて

2

もう少し遊んだ後、私は最終的にアップロードボタンの要素の子をinputにすることによって動作させました。 buttonの子としてinputを持つことは正しくないので、アップロードボタンをdivにする必要がありました。

See it in action here

1

私は質問を理解していれば、これはあなたが

jsfiddle.net/yVFWJ/1/

.button { 
    width: 47px; 
    height: 19px; 
    cursor: pointer; 
    text-indent: -9999px; 
    border: none; 
    background-image: url(http://www.hudson-realestate.com/us/images/uploadButton.gif); 
} 
+0

カスタムイメージで背景を置き換えるんまあ、 - しかし、そのイメージが応答しません。おそらく、私はそれを完全に実用的な例にするために[ホバー状態を追加する]必要があります(http://jsfiddle.net/Xeoncross/yVFWJ/5/)。しかし、[私もこれを試しました](http://jsfiddle.net/Xeoncross/yVFWJ/2/)画像の代わりにCSSとテキストを使うことができました。 – Xeoncross

+0

希望する場合は、ホバーを使用してください – Shepherd

0

フムを達成したいのか...あなたはdocument.onmousemoveイベントを使用することができます。そこにマウスの位置がボタン領域内にあるかどうかを確認することができます。そうであれば、ボタンのクラスを単に "send_button_hover"に変更します。そうでない場合は、クラスを「send_button」などに変更します。

純粋なJavaScriptを使用して行うことができます。それほど難しいことではありません。 jQueryを使用すると、ロットの方が簡単です。イベントをハンドリングするための機能はmousemove()です。 height()およびwidth()は、ボタンのディメンションを計算する機能です。 offset functionsボタンの位置を計算し、toggleClass()ボタンのクラスを変更します。

関連する問題