7

要件を満たすカスタム デザインのクロスブラウザー (すべての主要なブラウザー) 選択タグを作成する方法を見つけようとしています。

  • 数行のコードを使用
  • クロスブラウザ
  • 高速 (ユーザーがページを表示してから 1 ～ 2 秒後に読み込まない)
  • 複製しやすい

私が見つけたものの中には、Firefox でのみ動作するものや、webkit を使用しているが他のスタイルをいじっているものがあります。それから、自分の選択肢を確認するためにいくつかの脳細胞を揚げ始めました。そして、私はこれらを試しました：

最初の解決策

cssのみで画像を背景として使用していますが、アクティブなときにクロムの境界線を削除できませんでした。矢印が削除されたため（これは素晴らしいことです）、 firefox-webkit-appearance: none;では実行できません。

2番目の解決策

select を div として置き換えたり使用したりすることを jquery の助けを借りて試みていますが、ブルガリアの何人かによって作成されたこのプラグインを使用するようにアドバイスされた人もいますが、それでも派手すぎると思います。

3番目の解決策

select の上部に span/div タグを追加します。私はこれに時間を費やしましたが、自分ではできませんでした。実装しようとしているときに遭遇した問題について、1 年前からの質問が見つかりました。これは、選択タグのクリックをシミュレートしていました (ユーザーがクリックしたかのように)。最終的には制服で行くことにしました。彼らのプラグインは必要以上のことをしてくれますが、問題の解決にも適しています。

最初の解決策では、私の問題をまったく解決できませんでした (おそらく間違ったアプローチまたは css コード)。2 番目と 3 番目では、コード行が多すぎます (プラグインなど)。私が考えていなかった他の方法や、すべての要件に一致する方法はありますか?

4

2 に答える 2

3

Formalizeは、かなりきちんとした簡単なプラグインです。はい、jquery に依存しますが、サイトのアーキテクチャが高品質であると仮定すると、.js ファイルが最初にキャッシュされた後のレンダリングには影響しません。

Web サイトでページ コンテンツの配信に ajax を多用している場合は、スタイル設定されていないコンテンツの事前のフラッシュを完全に回避できます。

于 2012-04-18T22:00:43.527 に答える
2

ねえ、あなたはこのようにこれを行うことができます

CSS

label.custom-select {
    position: relative;
    display: inline-block;

}

    .custom-select select {
        display: inline-block;
        padding: 4px 3px 3px 5px;
        margin: 0;
        font: inherit;
        outline:none; /* remove focus ring from Webkit */
        line-height: 1.2;
        background: #000;
        color:white;
        border:0;
    outline:none;
    }




    /* Select arrow styling */
    .custom-select:after {
        content: "▼";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        font-size: 60%;
        line-height: 30px;
        padding: 0 10px;
        background: green;
        color: white;
    }

    .no-pointer-events .custom-select:after {
        content: none;
    }

HTML

<label class="custom-select">

    <select>
        <option>Sushi</option>
        <option>Blue cheese with crackers</option>
        <option>Steak</option>
        <option>Other</option>
    </select>
</label>

ライブデモはこちらhttp://jsfiddle.net/rohitazad/XxkSC/555/

于 2012-04-19T08:17:05.820 に答える