6

JQuery と CSS を使用してスタイル設定されたサイトを用意します。フォームを使用して検索用の入力を収集し、選択ボックスとスクロールバーに問題がある。

私は主に Chrome と IE 用にこれを開発しています。現在、私は Chrome に関心がありますが、クロスプラットフォーム ソリューションがあればよいでしょう。

webkit-scrollbar を使用して他のスクロールバーのスタイルを設定すると、問題なく動作します。

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

選択入力ボックスを次のようにスタイリングしても問題なく動作します。

select {
  -webkit-appearance: button;
  -webkit-border-radius: 2px;
  /*-webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);*/
  -webkit-padding-end: 20px;
  -webkit-padding-start: 2px;
  -webkit-user-select: none;
  background-image: -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
  background-position: center right;
  background-repeat: no-repeat;
  border: 1px solid #AAA;
  color: #555;
  font-size: inherit;
  margin: 0;
  overflow: hidden;
  padding-top: 2px;
  padding-bottom: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;

}

まとめられないように見えるのは、選択入力をクリックしたときに表示される特定のスクロールバーのスタイルです (スクロールバーを表示するのに十分な項目が存在する場合)。

明らかに要素がなく、本当にスタイリングできるかどうかはわかりません。JQueryはオプションかもしれませんが、プラグインの後にプラグインでページをオーバーロードしたくありません.

ページの他のすべてはスタイル設定されており、Chrome と IE のデフォルトのスクロールバーは、実際には入力の場違いに見えます。

独自のドロップダウン ボックスを作成し、非表示の入力フィールドにデータを入力する方法もあると思いますが、HTML5 と CSS3 がいかに柔軟であると想定されているかを考えると、かなり洗練されていないように思えます。

どんな助けや洞察も大歓迎です。

4

4 に答える 4

2

選択ドロップダウンのスクロールバーは、次の方法を使用してスタイルを設定できます。

select::-webkit-scrollbar

CSS を有効にするには、幅と高さのプロパティも設定する必要があります。以下のコードは、通常のドロップダウン、幅と高さのプロパティがないスタイル付きドロップダウン、および幅と高さのプロパティを持つスタイル付きドロップダウンを示し、違いを示しています。 

select {
  padding: 3px 12px;
  outline: none;
  width: 250px;
  margin-bottom: 20px;
}

select.widthHeight::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

select.style::-webkit-scrollbar-track {
  border: rgb(180, 180, 180);
  background-color: #ff6536;
}

select.style::-webkit-scrollbar-thumb {
  background-color: #3677ef;
  border: 1px solid rgb(193, 193, 193);
}

div {
  margin-bottom: 5px;
}
<div>Normal</div>
<select>
  <option>Value 1</option>
  <option>Value 2</option>
  <option>Value 3</option>
  <option>Value 4</option>
  <option>Value 5</option>
  <option>Value 6</option>
  <option>Value 7</option>
  <option>Value 8</option>
  <option>Value 9</option>
  <option>Value 10</option>
  <option>Value 11</option>
  <option>Value 12</option>
  <option>Value 13</option>
  <option>Value 14</option>
  <option>Value 15</option>
  <option>Value 16</option>
  <option>Value 17</option>
  <option>Value 18</option>
  <option>Value 19</option>
  <option>Value 20</option>
  <option>Value 21</option>
  <option>Value 22</option>
  <option>Value 23</option>
  <option>Value 24</option>
  <option>Value 25</option>
</select>

<div>Styled without width and height css</div>
<select class="style">
  <option>Value 1</option>
  <option>Value 2</option>
  <option>Value 3</option>
  <option>Value 4</option>
  <option>Value 5</option>
  <option>Value 6</option>
  <option>Value 7</option>
  <option>Value 8</option>
  <option>Value 9</option>
  <option>Value 10</option>
  <option>Value 11</option>
  <option>Value 12</option>
  <option>Value 13</option>
  <option>Value 14</option>
  <option>Value 15</option>
  <option>Value 16</option>
  <option>Value 17</option>
  <option>Value 18</option>
  <option>Value 19</option>
  <option>Value 20</option>
  <option>Value 21</option>
  <option>Value 22</option>
  <option>Value 23</option>
  <option>Value 24</option>
  <option>Value 25</option>
</select>

<div>Styled</div>
<select class="style widthHeight">
  <option>Value 1</option>
  <option>Value 2</option>
  <option>Value 3</option>
  <option>Value 4</option>
  <option>Value 5</option>
  <option>Value 6</option>
  <option>Value 7</option>
  <option>Value 8</option>
  <option>Value 9</option>
  <option>Value 10</option>
  <option>Value 11</option>
  <option>Value 12</option>
  <option>Value 13</option>
  <option>Value 14</option>
  <option>Value 15</option>
  <option>Value 16</option>
  <option>Value 17</option>
  <option>Value 18</option>
  <option>Value 19</option>
  <option>Value 20</option>
  <option>Value 21</option>
  <option>Value 22</option>
  <option>Value 23</option>
  <option>Value 24</option>
  <option>Value 25</option>
</select>

于 2021-01-05T05:21:42.990 に答える
1

望ましい美学を実現するために JS と代替 HTML マークアップを使用するかどうかについての関連する考え。美学のために「ハッキング」すると、モバイルブラウザで望ましくない結果が生じるでしょうか? iPad では、select 要素のデフォルトの機能は、選択するオプションのホイールを表示することです。選択をハッキングすることで、その機能を失うのではないでしょうか?

于 2013-06-21T18:54:39.993 に答える
1

select要素のスタイルを設定できないか、少なくともあまりうまくいかないと確信しています。オプションがあればいいのですが、変更したい値が非常に多いため、独自の値を作成する方が簡単です. 基本的に、非表示の入力の値を変更し、選択した値を表示する別の要素で表示および非表示にできるクリック可能な要素で div を作成します。

個人的には、これが最善の方法だと思います。完全に制御できるため、必要に応じてスタイルを設定できますが、入力要素のスタイルを変更する jQuery UI などの JavaScript UI プラグインを使用することもできます。

于 2012-06-07T21:48:49.213 に答える
-3

ドロップダウンなどのスタイルを設定できます。何度もやったことがあります。スクロールバーに関しては、他のことと同じように行います。

于 2014-11-13T05:48:30.007 に答える