2016-07-23 5 views
0

タイトルはそれをすべて表しています。あなたはこれについてどうやって行くのですか?たとえば、ファイルアップロードボタンの幅を編集すると、次のようになります。http://i.imgur.com/jacnps2.png比較のため、通常のファイルアップロードボタンを次に示します。http://i.imgur.com/tIy05HA.pngruby​​ on railsまたはCSSのファイルアップロードボタンの外観を変更する

赤い四角形は、通常ボタンが占める領域を表します。さらに、その場所にカーソルを置くと(赤と青の矩形が重なっている部分を除く)、カーソルが手のアイコンに変わり、その領域をクリックすると何かが起きることを示します。しかし、何も起こらない。

青色の四角形は、ファイルのアップロードフォームを表示させるために、画面のどの部分をクリックできるか(ほとんど目に見えず、通常よりもはるかに小さい)を表します。

ファイルのアップロードボタンの高さを編集しようとすると、同様の結果が得られます。水平方向ではなく、垂直方向にのみ表示されます。

私の目標は何かを説明するためです:私は自分のウェブサイト上のユーザーのアバターの上に透明または不可視のファイルアップロードボタンをあまりにも重視したいと思います。これまでは簡単な部分を取り除き、ファイルのアップロードボタンを透明にしてユーザーのアバターの上にオーバーレイしましたが、ファイルアップロードボタンの使用可能なサイズを編集する方法はわかりませんでした。これの実例については、あなたがFacebookのプロフィールを持っているなら、あなたのプロフィールに行って、あなたのアバターの上にマウスを置いてください。 「プロフィール画像の更新」という言葉が表示され、別の設定ページに行く必要はなく、プロフィールから直接アバターを編集するためにクリックすることができます。

+0

これは関連RubyOnRailsではありません。 – aBadAssCowboy

答えて

2

ファイルアップロードボタンのスタイルを変更することはできません。ファイルアップロードボタンは、ブラウザに固有のもので、異なるブラウザでは異なる方法でレンダリングされます。これらのスタイルファイルアップロードボタンはすべて実際のファイルアップロードボタンではなく、ファイルアップロードボタンの動作をシミュレートしています。

CSSとJavascriptを使用してこれに異なるアプローチがあります。それらのほとんどはネイティブボタンを隠し、position: absoluteopacityのCSSプロパティを使用してカスタムボタンを上に置き、カスタムボタンをクリックするとネイティブボタンのクリックをシミュレートします。

ウェブ上にはこれに対応するソリューションがかなりあるので、ここではソリューションを投稿する代わりに参照してください。

は、以下を参照してください。

+0

ありがとうございます!これら3つのソリューションのすべてが途中で機能します。しかし、HTMLとCSSを使用してボタンのサイズと形状を編集できるようになったので、ボタンをユーザーのアバターと関連付ける方法はもうわかりません。現在のところ、この関連付けは '<%= f.file_field:avatar%>'を使ってルビーで行いますが、HTMLでは ''どのようにして再作成しますか?このボタンとユーザーアバターの間にHTMLを使用していますか? – Display

+0

私はそれをRubyのその1行の周りにいくつかのHTMLをラップすることで動作させました。再度、感謝します! – Display

+0

'<%= f.file_field:avatar%>'によって生成されたファイルの入力タグには、パラメータの提出方法を決定する 'name'属性があります。例: ''同じ 'name'属性と値をカスタムHTMLファイル入力タグに追加することを確認した場合、それはあなたの関連付けを維持します。'name'属性が生成されていない場合は、フォーム生成ロジックに問題があります。 – aBadAssCowboy

関連する問題