it-swarm.dev

Come rendere entrambe le frecce su/giù nel campo di selezione del CSS?

Sto lavorando su un sito web (costruito su Wordpress, tema personalizzato) in cui voglio aggiungere su/giù freccia nel campo di selezione del CSS. Il codice HTML che sto usando per creare freccia su/giù per il campo di selezione selezionato è:

<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>

Ecco il completo fiddle https://jsfiddle.net/ovp8Lxjw/4/embedded/result per il codice sopra. In questo momento, ha solo una freccia verso il basso. 

Nel violino sopra, voglio aggiungere entrambe le frecce su/giù di colore blu. In questo momento, mostra solo la freccia verso il basso. 

Dichiarazione problema:

Mi chiedo quale codice CSS devo aggiungere nel violino di cui sopra in modo che possa vedere su/giù freccia (come mostrato nello screenshot sottostante, contrassegnato da una freccia) nel campo di selezione del campo css. Non posso apportare alcuna modifica al codice HTML poiché proviene da inspect da wordpress website

 enter image description here

7
john

Questo è un esempio semplice e diretto utilizzando un'icona Font Awesome con codifica Base64 come immagine di sfondo per la casella di selezione.

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>

Puoi controllare questo in jsFiddle

Inoltre un link a Icomoon App , utilizzato per creare l'immagine png dell'icona utilizzata.

1
Peter Darmis

L'icona della freccia di selezione predefinita viene disegnata dal browser. Non ci sono API per dire al browser di sostituire l'icona della freccia, quindi dovrai riorganizzare l'elemento select e sovrapporre le tue frecce. Puoi disegnare le tue frecce che hanno uno stile identico alle frecce del tuo browser, ma ricorda che l'icona predefinita sarà diversa per altri browser e sistemi operativi.

Per ridimensionare l'elemento selezionato utilizzando solo i CSS, dovrai scegliere come target sia la select che l'elemento p principale. La selezione ha un ID, che è facile da raggiungere, ma il targeting di quell'elemento p specifico non è facile solo dal codice che hai fornito. Comunque guardando il link al sito Wordpress fornito c'è un'etichetta poco prima del p, del modulo <label for="search-box-filter_31">Name of Institution</label>. Ciò significa che l'elemento p può essere scelto come target usando il selettore CSS label[for=search-box-filter_31] + p.

Prima devi assicurarti di avere abbastanza spazio per la tua nuova freccia. Ciò si ottiene aumentando la larghezza della selezione in base alla larghezza delle nuove frecce e aggiungendo la stessa quantità al padding destro p. Un modo per cambiare la larghezza della selezione è usando calc(100% + 30px). Se le tue nuove frecce hanno la stessa larghezza delle icone predefinite potresti non aver bisogno di farlo, ma in alcune configurazioni le tue frecce potrebbero sovrapporsi al contenuto della selezione.

Inoltre l'elemento p deve ridursi per adattarsi al suo contenuto. Ci sono alcuni modi per farlo, ma nella tua situazione il meno probabile per rompere la formattazione sta impostando display: table.

Infine, puoi usare lo ::after pseudo elemento su p per creare le frecce desiderate e sovrapporlo alla fine dell'elemento select, nascondendo la freccia predefinita. Nell'esempio seguente ho creato le frecce con SVG in linea, ma puoi utilizzare qualsiasi immagine di sfondo che meglio si adatta alla tua situazione. Imposta l'elemento ::after per avere position:absolute e modificalo per adattarlo esattamente sul lato destro della selezione. Per creare lo sfondo sfumato blu sotto le frecce che hai nella tua immagine, usa più sfondi con il primo essere le tue frecce e il secondo è un gradiente CSS.

Si noti che poiché l'elemento ::after si trova in cima alla selezione, facendo clic sulle frecce non verranno visualizzate le opzioni. Puoi impostare pointer-events: none; per passare i clic, ma questo non funzionerà su IE.

Il CSS è sotto, o in alternativa puoi vederlo nel 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;
}

Il risultato (seguito dalla selezione predefinita come appare in Firefox su Linux):

enter image description here

Certo, le frecce e il loro sfondo blu possono essere stilizzati in qualsiasi altro modo che desideri. Tieni presente che l'aggiunta di uno stile personalizzato alle frecce di selezione lo renderà diverso dallo stile predefinito del browser. Puoi modificarlo per adattarlo perfettamente in un unico browser, ad es. Chrome, ma un altro browser, ad es. Firefox, mostrerà le cose in modo diverso e il tuo stile personalizzato non corrisponderà. Per avere un aspetto uniforme su tutti i browser e i sistemi operativi, è necessario assicurarsi che tutti gli elementi di selezione/input siano abbinabili tra loro.

8
jla

Questo può darti un po 'di conforto mentre dici che non puoi toccare l'HTML. Stavo giocando con i 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

Vorrei usare il seguente: selettore sull'elemento p. 

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

La soluzione per puro CSS/HTML è disponibile, ma funziona attraverso l'hack quando estendiamo l'altezza tramite html size = "2" e poi di nuovo lo restringiamo attraverso l'altezza:

<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>

Ma non vorrei scrivere un codice simile per un progetto di lavoro, invece è meglio usare la libreria js, ad esempio: https://github.hubspot.com/select/docs/welcome/

0
nektobit