Comment faire les deux flèches haut/bas dans le champ de saisie sélectionné en CSS?
Je travaille sur un site Web (construit sur Wordpress, thème personnalisé) dans lequel je souhaite ajouter la flèche haut/bas dans le champ de saisie sélectionné dans CSS. Le code HTML que j'utilise pour créer des flèches haut/bas pour le champ de sélection est:
<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>
Voici le violon complet https://jsfiddle.net/ovp8Lxjw/4/embedded/result pour le code ci-dessus. Pour l'instant, il n'a que la flèche basse.
Dans le violon ci-dessus, je veux ajouter les flèches haut/bas de couleur bleue. En ce moment, il ne montre que la flèche vers le bas.
Déclaration du problème:
Je me demande quel code CSS je dois ajouter dans le violon ci-dessus pour que je puisse voir la flèche haut/bas (comme indiqué dans la capture d'écran ci-dessous, marquée d'une flèche) dans le champ de sélection css. Je ne peux apporter aucune modification au code HTML car il provient de inspect de wordpress website .
Ceci est un exemple simple et direct utilisant une icône Font Awesome codée en base64 comme image d’arrière-plan pour la zone de sélection.
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>Vous pouvez vérifier ceci dans jsFiddle
En outre, un lien vers Icomoon App , utilisé pour créer l’image png de l’icône utilisée.
La flèche de sélection par défaut est dessinée par le navigateur. Aucune API ne vous permet d'indiquer au navigateur de remplacer l'icône en forme de flèche. Vous devez donc modifier le style de l'élément sélectionné et superposer vos propres flèches. Vous pouvez dessiner vos propres flèches dont le style est identique à celui de votre navigateur, mais n'oubliez pas que l'icône par défaut sera différente pour les autres navigateurs et systèmes d'exploitation.
Pour modifier le style de l'élément sélectionné en utilisant uniquement CSS, vous devez cibler l'élément sélectionné et son élément p parent. La sélection a un ID, qui est facile à cibler, mais cibler cet élément p spécifique n’est pas facile à partir du code que vous avez fourni. Cependant, en regardant le lien de site Wordpress fourni, il y a une étiquette juste avant la p, de la forme <label for="search-box-filter_31">Name of Institution</label>. Cela signifie que l'élément p peut être ciblé à l'aide du sélecteur CSS label[for=search-box-filter_31] + p.
Vous devez d’abord vous assurer que vous disposez de suffisamment d’espace pour votre nouvelle flèche. Ceci est accompli en augmentant la largeur de la sélection par la largeur de vos nouvelles flèches et en ajoutant le même montant au remplissage droit du parent p. Une façon de modifier la largeur de la sélection consiste à utiliser calc(100% + 30px). Si vos nouvelles flèches ont la même largeur que les icônes par défaut, vous n'aurez peut-être pas besoin de le faire, mais dans certaines configurations, vos flèches peuvent chevaucher le contenu de la sélection.
De plus, l'élément p doit être réduit pour s'adapter à son contenu. Il existe plusieurs façons de procéder, mais dans votre cas, le moins susceptible de rompre le formatage est de définir display: table.
Enfin, vous pouvez utiliser le pseudo-élément ::after sur p pour créer les flèches souhaitées et les superposer à la fin de votre élément de sélection, en masquant la flèche par défaut. Dans l'exemple ci-dessous, j'ai créé les flèches avec SVG intégré, mais vous pouvez utiliser l'image de fond qui convient le mieux à votre situation. Définissez l'élément ::after sur position:absolute et personnalisez-le pour le placer exactement sur le côté droit de la sélection. Pour créer l'arrière-plan de dégradé bleu sous les flèches que vous avez dans votre image, utilisez plusieurs arrière-plans, le premier étant vos flèches et le second un dégradé CSS.
Notez que puisque l'élément ::after est au-dessus de la sélection, un clic sur les flèches ne permet pas d'afficher les options. Vous pouvez définir pointer-events: none; pour transmettre les clics, mais cela ne fonctionnera pas sous IE.
Le CSS est ci-dessous, ou vous pouvez le voir au code suivant 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;
}
Le résultat (suivi de la sélection par défaut tel qu'il apparaît dans Firefox sous Linux):
Bien sûr, les flèches et leur arrière-plan bleu peuvent être stylés de la manière que vous souhaitez. Veuillez noter que l'ajout d'un style personnalisé aux flèches de sélection le rendra différent du style de navigateur par défaut. Vous pouvez le personnaliser pour qu'il s'intègre parfaitement dans un seul navigateur, par exemple. Chrome, mais un autre navigateur, par exemple Firefox, affichera les choses différemment et votre style personnalisé ne correspondra pas. Pour avoir une apparence transparente sur tous les navigateurs et systèmes d'exploitation, vous devez vous assurer que tous les éléments de sélection/entrée sont stylés de manière à ce qu'ils se correspondent.
Peut-être que cela vous réconforte lorsque vous dites que vous ne pouvez pas toucher le code HTML. Je jouais avec 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;
}
J'utiliserais le sélecteur after: sur l'élément p.
p:after{
content: url("path/to/image");
}
La solution au pur CSS/HTML est disponible, mais fonctionne par le biais de hack lorsque nous étendons la hauteur via html size = "2" puis que nous le rétrécissons à nouveau à travers la hauteur:
<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>Mais je n'écrirais pas un tel code pour un projet en cours, mais il vaut mieux utiliser la bibliothèque js, par exemple: https://github.hubspot.com/select/docs/welcome/