1

ここに画像の説明を入力してください

上の画像をご覧ください。私はこの問題を数回経験しました。テキストがボタンと一致することはありません。彼らが並ぶようにどうやってそれを変えることができますか？

コードは単純です：

<td><label>Image/Avatar Upload</label></td>
<td><input type="file" name="avatar"></td>

およびcss：

input {width: 350px; font-size: 20px; padding: 2px;}

ありがとう！

4

2 に答える 2

2

簡単な答えは次のとおりです。ファイル入力のスタイルを設定しようとしないでください

長い答え：スタイリングファイルの入力を完全に制御することは、何年もの間私たちを避けてきました。それらには、 ShadowDOMと呼ばれるものに該当するコンポーネントがあります。見ることはできますが、実際に触れることはできません。新しい入力要素（日付、時刻、色など）にも同じ「問題」があります。

すべてのブラウザスタイルのファイル入力が同じ方法であるとは限らないことに注意してください。この要素を本当に制御したい場合は、それを置き換える必要があります（google：「ファイル入力を画像に置き換える」）。これを行うと、ユーザーはファイル入力要素を操作していないときに、アップロードされているファイルを正確に確認できなくなります（セキュリティ上の理由から、ファイル名にはJavaScript経由でアクセスできますが、パスにはアクセスできません）。なれ）。

于 2012-12-30T14:44:41.473 に答える
0

提供されたコードは正常に機能しているため、詳細を提供する必要があります。

<td><label>Image/Avatar Upload</label></td>
<td><input type="file" name="avatar"></td>

このフィドルを参照してください

于 2012-12-30T14:13:36.320 に答える