web-dev-qa-db-ja.com

CSSの選択入力フィールドで上下両方の矢印を作成するにはどうすればよいですか？

私は website （Wordpressで構築されたカスタムテーマ）に取り組んでおり、そこに追加したいCSSの選択入力フィールドの上/下矢印。選択入力フィールドの上/下矢印を作成するために使用しているHTMLコードは次のとおりです。

<p>
   <select name="filter_31" id="search-box-filter_31">
      <option value="Vancouver Island University">University of A</option>
      <option value="Western University">University of B</option>
      <option value="Wilfrid Laurier University">University of C</option>
      <option value="York University">University of D</option>
   </select>
</p>

完全なフィドルは次のとおりです https://jsfiddle.net/ovp8Lxjw/4/embedded/result 上記のコードの場合。この時点では、下矢印しかありません。

上記のフィドルでは、青色の上下矢印の両方を追加します。この時点では、下矢印のみが表示されます。

問題ステートメント：

上/下矢印（が見えるように、上記のフィドルにどのCSSコードを追加する必要があるのか​​疑問に思っています）下のスクリーンショットに示すように、CSSの選択入力フィールドに矢印でマークされています。 HTMLコードは、wordpress website からの検査から来ているため、変更できません。

enter image description here

javascriptjqueryhtmlcsswordpress
7
john

これは、選択ボックスの背景画像としてbase64でエンコードされたFont Awesomeアイコンを使用したシンプルでわかりやすい例です。

select {
  background-color: white;
  border: thin solid grey;
  border-radius: 4px;
  display: inline-block;
  font: inherit;
  line-height: 1.5em;
  padding: 0.5em 3.5em 0.5em 1em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
}
select.arrows {
  background-image:    url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAA3klEQVRIS+3VMU9CMRTF8d8zBL+aizoQFhx0kUk33RzdYMNFXUFnYeGrYYyaJiUxJHDLSxodbNKpfeffc9/pbaPyaCrr+3OA++z4rtT5Pg5GuMnCY9yWQEoBE1xhlUUP8YDrCBIB0vojLvGO0yz4hm4JJAKcYYoPHGOZAUdYoIMBXrc5iQAHeMlzviFygj7O8dkWEJU4XI8chALRhn9AVKHf70VRTHu4wFfbmKZLNKt50dLBnna0imcMd/2I0phWa3Y/D1e1Xa9BCZJG0VuQNpaWKMx72xS1Fl5/WN3BN+AgJhnZQlq4AAAAAElFTkSuQmCC');
  background-position: calc(100% - .5rem), 100% 0;
  background-size:  1.5em 1.5em;
  background-repeat: no-repeat;
}

select.arrows:focus {
  border-color: blue;
  outline: 0;
}
<p>
  <select class="arrows">
      <option value="Vancouver Island University">Vancouver Island University</option>
      <option value="Western University">Western University</option>
      <option value="Wilfrid Laurier University">Wilfrid Laurier University</option>
      <option value="York University">York University</option>
   </select>
</p>

これは jsFiddle で確認できます

さらに、 Icomoon App へのリンクは、使用されるアイコンのpng画像を作成するために使用されます。

3
Peter Darmis

デフォルトの選択矢印アイコンはブラウザによって描画されます。ブラウザに矢印アイコンを置き換えるように指示するAPIはないため、select要素のスタイルを変更して独自の矢印をオーバーレイする必要があります。ブラウザの矢印と同じスタイルの独自の矢印を描画できますが、他のブラウザやオペレーティングシステムではデフォルトアイコンが異なることに注意してください。

CSSのみを使用して選択項目のスタイルを変更するには、選択とその親p要素の両方をターゲットにする必要があります。 selectにはIDがあり、ターゲットを設定するのは簡単ですが、特定のp要素をターゲットにすることは、提供したコードだけでは簡単ではありません。ただし、提供されるWordpressサイトリンクを見ると、pの直前に_<label for="search-box-filter_31">Name of Institution</label>_という形式のラベルがあります。これは、p要素がCSSセレクター_label[for=search-box-filter_31] + p_を使用してターゲットを設定します。

最初に、新しい矢印に十分なスペースを確保する必要があります。これは、選択の幅を新しい矢印の幅だけ増やし、親pの右パディングに同じ量を追加することにより実現されます。選択の幅を変更する1つの方法は、calc(100% + 30px)を使用することです。新しい矢印の幅がデフォルトのアイコンと同じ場合、これを行う必要はありませんが、一部の構成では、矢印が選択のコンテンツと重なる場合があります。

さらに、p要素はそのコンテンツに合わせて縮小する必要があります。これを行うにはいくつかの方法がありますが、あなたの状況では、フォーマットを破る可能性が最も低いのは_display: table_を設定することです。

最後に、pで_::after_疑似要素を使用して目的の矢印を作成し、それを選択要素の最後にオーバーレイして、デフォルトの矢印を非表示にすることができます。以下の例では、インラインSVGを使用して矢印を作成しましたが、状況に最適な任意の背景画像を使用できます。 _::after_要素を_position:absolute_に設定し、selectの右側に正確に収まるようにスタイルを設定します。画像にある矢印の下に青いグラデーションの背景を作成するには、複数の背景を使用します。最初の矢印は矢印で、2番目はCSSグラデーションです。

_::after_要素は選択の上部にあるため、矢印をクリックしてもオプションが表示されないことに注意してください。 _pointer-events: none;_を設定してクリックを渡すことができますが、これはIEでは機能しません。

CSSは以下にあります。または、代わりにcodepenで確認できます https://codepen.io/jla-/pen/ZqbWMj

_#search-box-filter_31 {
    width: calc(100% + 30px);
}
label[for=search-box-filter_31] + p {
    position: relative;
    display: table;
    border-radius: 5px;
    padding-right: 30px;
}
label[for=search-box-filter_31] + p::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 30px;
    border-radius: 0 5px 5px 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><polyline points='8,12,15,8,22,12' fill='none' style='stroke:white;stroke-width:2'/><polyline points='8,18,15,22,22,18' fill='none' style='stroke:white;stroke-width:2'/></svg>"),
        linear-gradient(to bottom, #a0d8ff 0%, #2591dd 100%);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
_

結果（Linux上のFirefoxに表示されるデフォルトの選択が続きます）：

enter image description here

もちろん、矢印とその青い背景は、希望する他の方法でスタイル設定できます。選択スタイルにカスタムスタイルを追加すると、デフォルトのブラウザスタイルとは異なって見えることに注意してください。 1つのブラウザにシームレスに収まるようにスタイルを設定できます。 Chrome、ただし別のブラウザ、例： Firefoxでは表示が異なり、カスタムスタイルは一致しません。すべてのブラウザーとオペレーティングシステムでシームレスな外観を実現するには、すべての選択/入力要素が互いに一致するようにスタイル設定されていることを確認する必要があります。

8
jla

これは、HTMLに触れることができないと言うので、ある程度の安心感が得られるかもしれません。 CSSで遊んでいた！

#search-box-filter_32 {
            background-color: white !important;
            font-size: 11px !important;
            background: url('https://cdn3.iconfinder.com/data/icons/trico-arrows-1/24/ExpandUpDownSmall-512.png') no-repeat right #ddd;
            background-position: 98%;
            padding: 2px 20px 2px 8px;
            padding-right: 20px;
            background-size: 14px;
            -moz-appearance: none;
            -o-appearance: none;
            -ms-appearance: none;
            -webkit-appearance: none;
            outline: none !important;
            -webkit-border-radius: 4px;
            border: 1px  solid #cccccc;
        }

https://codepen.io/mohan-wijesena/pen/dgMBLY

0
Mohan Wijesena

P要素でafter：セレクターを使用します。

p:after{
content: url("path/to/image");
}
0
Dhul Wells

純粋なCSS/HTMLのソリューションは利用可能ですが、htmlサイズ= "2"で高さを拡張し、再び高さで狭めると、ハックを介して機能します。

<p>
   <select name="filter_31" id="search-box-filter_31" size="2" style="font-size:16px; height:24px;">
      <option value="Vancouver Island University">University of Arizona</option>
      <option value="Western University">University of B</option>
      <option value="Wilfrid Laurier University">University of C</option>
      <option value="York University">University of D</option>
   </select>
</p>

しかし、私は作業中のプロジェクト用にそのようなコードを書くのではなく、代わりにjsライブラリを使用する方が良いでしょう、例えば： https://github.hubspot.com/select/docs/welcome/

0
nektobit