it-swarm.com.de

Wie erstelle ich in CSS einen Aufwärts-/Abwärtspfeil im ausgewählten Eingabefeld?

Ich arbeite an einer Website ( basierend auf Wordpress, benutzerdefiniertes Thema ), in der ich Aufwärts-/Abwärtspfeil im ausgewählten Eingabefeld in CSS hinzufügen möchte. Der HTML-Code, den ich verwende, um einen Aufwärts-/Abwärtspfeil für das ausgewählte Eingabefeld zu erstellen, lautet:

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

Hier ist die komplette Geige https://jsfiddle.net/ovp8Lxjw/4/embedded/result für den obigen Code. In diesem Moment hat es nur Pfeil nach unten.

In der obigen Geige möchte ich beide blauen Auf-/Abwärtspfeile hinzufügen. In diesem Moment wird nur der Abwärtspfeil angezeigt.

Problemstellung:

Ich frage mich, welchen CSS-Code ich in der obigen Geige hinzufügen muss, damit ich Aufwärts-/Abwärtspfeil ( wie im Screenshot unten gezeigt, markiert durch einen Pfeil ) in der sehen kann Eingabefeld in CSS auswählen. Ich kann keine Änderungen am HTML-Code vornehmen, da dieser von inspect von der wordpress website stammt.

 enter image description here

7
john

Dies ist ein einfaches und unkompliziertes Beispiel, das ein Base64-codiertes Font Awesome-Symbol als Hintergrundbild für die Auswahlbox verwendet.

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>

Sie können dies in jsFiddle überprüfen.

Zusätzlich ein Link zu Icomoon App , um das PNG-Bild des verwendeten Symbols zu erstellen.

1
Peter Darmis

Das Standardauswahlpfeilsymbol wird vom Browser gezeichnet. Es gibt keine API, mit der Sie dem Browser mitteilen können, dass er das Pfeilsymbol ersetzen soll. Daher müssen Sie das select-Element neu gestalten und Ihre eigenen Pfeile überlagern. Sie können Ihre eigenen Pfeile zeichnen, deren Stil mit den Pfeilen Ihres Browsers identisch ist. Beachten Sie jedoch, dass das Standardsymbol für andere Browser und Betriebssysteme unterschiedlich ist.

Um das select-Element nur mit CSS neu zu gestalten, müssen Sie sowohl das select-Element als auch das übergeordnete p-Element als Ziel festlegen. Das select hat eine ID, die leicht anvisiert werden kann, aber das Targeting auf das bestimmte p-Element ist nicht einfach mit dem von Ihnen bereitgestellten Code. Wenn Sie jedoch den bereitgestellten Wordpress-Site-Link betrachten, befindet sich direkt vor der Variable p eine Beschriftung des Formulars <label for="search-box-filter_31">Name of Institution</label>. Das bedeutet, dass das Element p mit dem CSS-Selektor label[for=search-box-filter_31] + p als Ziel ausgewählt werden kann.

Sie müssen zunächst sicherstellen, dass Sie genügend Platz für Ihren neuen Pfeil haben. Dies wird erreicht, indem Sie die Breite der Auswahl um die Breite Ihrer neuen Pfeile erhöhen und den rechten Abstand der übergeordneten Variable p denselben Betrag hinzufügen. Eine Möglichkeit, die Breite der Auswahl zu ändern, ist die Verwendung von calc(100% + 30px). Wenn Ihre neuen Pfeile dieselbe Breite wie die Standardsymbole haben, müssen Sie dies möglicherweise nicht tun. In einigen Konfigurationen überlappen die Pfeile jedoch möglicherweise den Inhalt der Auswahl.

Darüber hinaus muss das p -Element verkleinert werden, um zu seinem Inhalt zu passen. Es gibt einige Möglichkeiten, dies zu tun, aber in Ihrer Situation setzt display: table am wenigsten die Formatierung auf.

Schließlich können Sie das ::after-Pseudoelement für p verwenden, um die gewünschten Pfeile zu erstellen und sie am Ende des select-Elements zu überlagern, wobei der Standardpfeil ausgeblendet wird. Im folgenden Beispiel habe ich die Pfeile mit Inline-SVG erstellt, Sie können jedoch jedes Hintergrundbild verwenden, das am besten zu Ihrer Situation passt. Legen Sie für das ::after-Element position:absolute fest und passen Sie es an, damit es genau über die rechte Seite des select-Objekts passt. Um den blauen Hintergrund mit Farbverlauf unter den Pfeilen in Ihrem Bild zu erstellen, verwenden Sie mehrere Hintergründe. Der erste ist der Pfeil und der zweite ein CSS-Farbverlauf.

Da sich das ::after-Element über der Auswahl befindet, werden die Optionen nicht angezeigt, wenn Sie auf die Pfeile klicken. Sie können pointer-events: none; so einstellen, dass die Klicks weitergegeben werden. Dies funktioniert jedoch nicht im IE.

Das CSS ist unten, oder alternativ können Sie es unter der Adresse https://codepen.io/jla-/pen/ZqbWMj sehen.

#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;
}

Das Ergebnis (gefolgt von der Standardauswahl, wie es in Firefox unter Linux angezeigt wird):

enter image description here

Natürlich können die Pfeile und ihr blauer Hintergrund auf andere Weise gestaltet werden. Beachten Sie, dass das Hinzufügen eines benutzerdefinierten Stils zu den Auswahlpfeilen sich vom Standardbrowser-Stil unterscheidet. Sie können es so gestalten, dass es nahtlos in einen Browser passt, z. Chrome, aber ein anderer Browser, z. Firefox zeigt die Dinge anders an und Ihr benutzerdefinierter Stil wird nicht übereinstimmen. Um ein nahtloses Erscheinungsbild für alle Browser und Betriebssysteme zu erhalten, müssen Sie sicherstellen, dass alle Auswahl-/Eingabeelemente so gestaltet sind, dass sie zueinander passen.

8
jla

Möglicherweise gibt Ihnen das etwas Komfort, da Sie sagen, dass Sie den HTML-Code nicht berühren können. Ich habe mit CSS gespielt!

#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

Ich würde den after: -selektor für das p-Element verwenden. 

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

Die Lösung zu reinem CSS/HTML ist verfügbar, funktioniert jedoch durch den Hack, wenn wir die Höhe durch html size = "2" erweitern und dann durch die Höhe einschränken:

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

Ich würde jedoch keinen solchen Code für ein funktionierendes Projekt schreiben. Stattdessen ist es besser, die js-Bibliothek zu verwenden. Beispiel: https://github.hubspot.com/select/docs/welcome/

0
nektobit