Formulaires : présentation des select sur Safari #4852

Open
opened 1 week ago by MathieuAlphamosa · 6 comments

Les select n'ont pas la présentaiton voulue sur Safari :

Le padding, le background-color est d'autres règles de présentation CSS ne sont pas prisent en compte.
Pour corriger cela il faut passer par -webkit-appearance: none;
Attention néanmoins cela a un effet de bord non négligeable, le chevron permettant d'identifier qu'il s'agit d'un menu déroulant disparait être doit être refais manuellement.

Pour le coup de suggère de faire la même chose que Bootstrap : supprimer les styles par défaut quelque soit le navigateur et re-stylé manuellement avec, par exemple :

background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right .75rem center;
background-size: 16px 12px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

En bonus ça corrigera le petit problème d'affichage sur Chrome :

Les select n'ont pas la présentaiton voulue sur Safari : ![](https://git.spip.net/attachments/cd3d85ce-3f65-4d12-a762-8a0ce185eac4) Le padding, le background-color est d'autres règles de présentation CSS ne sont pas prisent en compte. Pour corriger cela il faut passer par `-webkit-appearance: none;` Attention néanmoins cela a un effet de bord non négligeable, le chevron permettant d'identifier qu'il s'agit d'un menu déroulant disparait être doit être refais manuellement. ![](https://git.spip.net/attachments/a15b3268-a0e6-43b0-85fd-8e2a180a3a86) Pour le coup de suggère de faire la même chose que Bootstrap : supprimer les styles par défaut quelque soit le navigateur et re-stylé manuellement avec, par exemple : ``` background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right .75rem center; background-size: 16px 12px; -webkit-appearance: none; -moz-appearance: none; appearance: none; ``` ![](https://git.spip.net/attachments/47a2a627-0090-4681-ada1-bdab8f2c47c5) En bonus ça corrigera le petit problème d'affichage sur Chrome : ![](https://git.spip.net/attachments/c90e1d4e-317a-4466-8fd1-11837d11c3a5)
Owner

Oui +1, je suggère de faire une PR.

Est-ce que cette solution fonctionne bien avec les widgets JS tels que select2 ou chosen ?

Oui +1, je suggère de faire une PR. Est-ce que cette solution fonctionne bien avec les widgets JS tels que select2 ou chosen ?

chosen cache les select avec un display: none et bricole un faux menu déroulant à la place, donc cette modification ne devrait pas le concerner.

Pour select2 c'est le même principe il cache le select (mais le garde accessible pour les personnes qui en ont besoin j'ai l'impression) et en ajoute un faux à la place.

Je débute en git.spip.net, pour ce genre de modification du core je m'y colle ou il y'a quelqu'un de l'équipe SPIP qui prend la main ?

**chosen** cache les select avec un `display: none` et bricole un faux menu déroulant à la place, donc cette modification ne devrait pas le concerner. Pour **select2** c'est le même principe il cache le select (mais le garde accessible pour les personnes qui en ont besoin j'ai l'impression) et en ajoute un faux à la place. Je débute en git.spip.net, pour ce genre de modification du core je m'y colle ou il y'a quelqu'un de l'équipe SPIP qui prend la main ?
b_b commented 1 week ago
Owner

Je débute en git.spip.net, pour ce genre de modification du core je m'y colle ou il y'a quelqu'un de l'équipe SPIP qui prend la main ?

Je peux le faire pour toi, mais c'est tout de même mieux si tu tentes de le faire toi même avant, ainsi tu auras le crédit du commit :)

> Je débute en git.spip.net, pour ce genre de modification du core je m'y colle ou il y'a quelqu'un de l'équipe SPIP qui prend la main ? Je peux le faire pour toi, mais c'est tout de même mieux si tu tentes de le faire toi même avant, ainsi tu auras le crédit du commit :)
Owner

@MathieuAlphamosa et si besoin d'aide "interactive" il y a souvent du monde sur irc https://irc.spip.net

@MathieuAlphamosa et si besoin d'aide "interactive" il y a souvent du monde sur irc https://irc.spip.net

Ok, je m'y colle d'ici le début de semaine prochaine.

Ok, je m'y colle d'ici le début de semaine prochaine.

Voilà une première proposition : #4853

Voilà une première proposition : https://git.spip.net/spip/spip/pulls/4853
Sign in to join this conversation.
No Milestone
No project
No Assignees
4 Participants
Notifications
Due Date

No due date set.

Dependencies

This issue currently doesn't have any dependencies.

Loading…
There is no content yet.