42

2番目の選択ボックスの矢印を最初のものと同じにしたい。しかし、矢印のスタイルを設定していないため、なぜそれらが異なるのかわかりません。

ここに画像の説明を入力

4

6 に答える 6

50

ほとんどの場合、ブラウザとOSが選択ボックスのスタイルを決定し、CSSだけでそれらを変更することはほぼ不可能です。交換方法を検討する必要があります。appearance: none主なトリックは、スタイリングの一部をオーバーライドできるように適用することです。

私のお気に入りの方法はこれです：

http://cssdeck.com/item/265/styling-select-box-with-css3

OSの選択メニューのUI要素に置き換わるものではないため、これに関連するすべての問題は存在しません（長いリストがメインのブラウザウィンドウから抜け出すことができません）。

幸運を ：）

于 2012-06-25T08:45:10.457 に答える
8

jQuery selectbox replacementを使用できます。jQueryプラグインです。

http://cssglobe.com/post/8802/custom-styling-of-the-select-elements

Pure- css http://bavotasan.com/2011/style-select-box-using-only-css/

于 2012-06-25T08:38:43.523 に答える
2

ie8 を使用していて、プラグインを使用したくない場合は、Rohit Azad と Bacotasan のブログに触発されたものを作成しました。選択した値を表示するために JS を使用してスパンを追加しました。

html:

<div class="styled-select">
   <select>
      <option>Here is the first option</option>
      <option>The second option</option>
   </select>
   <span>Here is the first option</span>
</div>

css (私は BG に矢印のみを使用しましたが、完全な画像を配置して配置を削除することもできます):

.styled-select div
{
    display:inline-block;
    border: 1px solid darkgray;
    width:100px;
    background:url("/Style Library/Nifgashim/Images/drop_arrrow.png") no-repeat 10px 10px;
    position:relative;
}

.styled-select div select
{
    height: 30px;
    width: 100px;
    font-size:14px;
    font-family:ariel;

    -moz-opacity: 0.00;
    opacity: .00;
    filter: alpha(opacity=00);
}

.styled-select div span
{
    position: absolute;
    right: 10px;
    top: 6px;
    z-index: -5;
}

js:

$(".styled-select select").change(function(e){
     $(".styled-select span").html($(".styled-select select").val());
});
于 2013-11-21T19:13:41.047 に答える
1

選択ボックスの矢印はネイティブの UI 要素であり、デスクトップ テーマまたは Web ブラウザーに依存します。jQuery プラグイン ( Select2、Chosenなど) または CSS を使用します。

于 2012-06-25T08:47:40.770 に答える
1

http://jsfiddle.net/u3cybk2q/2/ Windows、iOS、Android でチェック (ieexplorer パッチ)

.styled-select select {
   background: transparent;
   width: 240px;
   padding: 5px;
   font-size: 16px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   -webkit-appearance: none;
}
.styled-select {
   width: 240px;
   height: 34px;
   overflow: visible;
   background: url(http://nightly.enyojs.com/latest/lib/moonstone/dist/moonstone/images/caret-black-small-down-icon.png) no-repeat right #FFF;
   border: 1px solid #ccc;
}
.styled-select select::-ms-expand {
    display: none;
}
<div class="styled-select">
   <select>
      <option>Here is the first option</option>
      <option>The second option</option>
   </select>
</div>

于 2015-10-07T17:06:43.457 に答える