2

ファイル共有 Web サイトを作成しようとしていますが、デザインを背景画像として設定しようとしている個々のスタイルを設定するのではなく、デザインが非常に高度であるため、アップロード フォームのスタイルを設定するのに問題があります。

これは私のデザインです - http://icap.me/i/s5YIbheY3g.png

これは現在の取り組みです - http://icap.me/i/ODuzJOQMhS.png

これまでのところ、次のコードを使用してアップロード ボタンのスタイルを設定しました -

form input[type=submit] {
background : url("../img/upload.png") no-repeat center center;
width : 115px;
height :52px;
border : none;
color : transparent;
font-size : 0

}

画像を使用して他のフォーム ボタンのスタイルを設定する方法を知っていますか? ここに html があります -

            <form action="upload_file.php" method="post"enctype="multipart/form-data">
        <input type="file" name="file" id="file" />
        <br />
        <input type="submit" name="submit" value="Submit" />
        <input type="checkbox" name="vehicle" value="Bike">I agree to the terms and conditions<br>
        </form>
4

2 に答える 2

2

いくつかのフォーム要素のスタイリングは最悪です。残念ながら、ファイル要素はそれらの要素の 1 つです。これは、ブラウザがオペレーティング システムから実際にコントロール自体を派生させるためです (つまり、その外観をまったく制御できないということです)。これが意味することは、スタイルを設定するには、JavaScript といくつかの CSS ハッカリーが必要になるということです。

Quirksmode には、少なくとも開始するためのステップバイステップがあります。

ただし、その基本は次のとおりです。

  1. で通常の​​ファイル入力をスタイルしますposition: relative。
  2. 新しいプレーン オールド テキスト入力を追加し、ファイル入力の上に配置します。
  3. ファイル入力のように見えるようにテキスト入力のスタイルを設定します
  4. ファイル入力を 0 にドロップして、非表示にしますopacityが、クリック可能にします (実際にはファイル入力をまだ使用しているため、これが重要です)。
  5. JavaScript を使用してファイル名をテキスト入力に入れる

これは一種のプリミティブであり、標準にあまり準拠していません (余分な要素など)。すでに JavaScript ライブラリ (jQuery、MooTools など) を使用している場合は、コントロール自体を処理するプラグインを見つけることができる場合があり、それにスタイルを追加するだけです。この方法の利点は、必ずしも自分で余分な要素を追加する必要がないことです (そのため、迷子のinputフィールドが横たわっていません)、JavaScript が (理想的には) ファイル入力の存在を検出し、それに応じてそれらを「修正」します。

于 2012-11-13T15:21:19.037 に答える
0

ブラウズ ボタンのスタイルを設定するには、css-javascript duo や、箱から出してすぐに動作するtwitter ブートストラップのようなものの助けを借りる必要があります1 .. また、この投稿とこの記事を確認してください。

個人的な見解として、ブラウズ ボタンやドロップダウン メニューなどのフォーム要素はあまり調整すべきではないと思います..2 つの利点があります..

于 2012-11-13T16:03:05.860 に答える