0

選択ドロップダウン リストを含む Web ページで作業しています。私の仕事は、それを「機能的」にすること、つまり、正しいコンテンツを表示することであり、同時に「合理的に見栄えがよくなる」ようにすることです。後で Web デザイナーが来て、「ルック アンド フィール」を磨きます。

私を困惑させているのは、CSS のみで Html Select 要素のスタイルを設定する良い方法がないことです。私が見つけたすべてのフレームワーク/ソリューションには、次のものが含まれます。

  • 元の select 要素を非表示にする

  • <div> <span>またはの組み合わせを使用して<ul> <li>、ネイティブの選択ボックスをシミュレートします

  • <div> <span>非表示のネイティブ選択ボックスとシミュレーターのデータを同期するプラグイン JavaScript コード。

Web ページの動作をテストするには、Selenium クライアントを作成する必要があります。

ネイティブの選択ボックスに対してテストするように記述した場合、上記の 3 つの手順を使用してドロップダウンをさらにスタイル設定すると、テストが中断されます。これは、セレンでは非表示の要素をクリックできないためです。

今すぐスタイリングを適用し、シミュレートする をクリックするように Selenium クライアントを作成すると<div><span>、将来的にテストが壊れる危険があります。Web デザイナーは後で選択ボックスのスタイル設定に別の方法を選択する可能性があり、今日テストしている要素がページから削除される可能性があるためです。

誰かが以前に同様の経験をしたことがあるかどうか、またこの種の問題に取り組むためのベストプラクティスは何なのか疑問に思っています.

4

1 に答える 1

1

あなたには 2 つの選択肢があることがわかりました (どちらを思いついたでしょうか)。

ネイティブ コンポーネントの最小限のスタイリング。一部のブラウザーでは、スタイリングを行うことができますが、主に選択ボックスの高さと幅のようなもので、あまり凝ったものではありません。ネイティブであり、プラグインではなくブラウザに依存しているため、問題が発生しないようにすることをお勧めします。

または、プラグインを使用して、要素の上に div を作成するための凝った作業を行うこともできます。しかし、さまざまなプラグインがあり、それらの間でマイレージが異なります。

現在のプロジェクトでは、カスタム選択ボックスが必要でした。私のスクリプトが行うことは、選択ボックスの後ろに div を作成し、選択ボックスを不透明度: 0 に変えることです。 . クリックすると、通常の選択ドロップダウン リストが表示されます。かなりクール。最良の部分は、ページの読み込み時に JavaScript のみを使用して div を作成し、それ以外はすべてネイティブ コントロールであることです。この方法についてさらに情報が必要な場合は、例を提供できますが、これは Web で見つけたものです。だから、あなたも見たことがあるかもしれません。

于 2013-10-21T16:55:24.117 に答える