Browse Source

Ticket #4852 : Apparence unifiée pour les select

Unifie la présentation des select, quelque soit le navigateur utilisé.

Proposition de correction au ticket #4852 : spip/spip#4852

On désactive complètement les mise en forme natives, on place une encoche via un svp en background du select. L'encoche a été choisie car elle est très similaire à celle déjà utilisée pour les bouton "dropdown".

Note : Perso j'aime bien ajouter une légère teinte en bg (#fafafa par exemple) pour pouvoir distinguer plus aisément les select des input text... ce n'est pas fait ici pour rester consensuel.
issue_4852
MathieuAlphamosa 2 months ago
parent
commit
d5e5795acf
  1. 12
      prive/themes/spip/forms.css.html

12
prive/themes/spip/forms.css.html

@ -864,6 +864,18 @@
border-radius: var(--spip-form-input-border-radius);
}
/* Select (apparences unifiées) */
.formulaire_spip select {
padding-right: calc(var(--spip-form-input-padding-x) + 21px);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23000000' fill-opacity='0.5' stroke='none' d='M 2 6 l 6 6 l 6 -6 l -12 0'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right var(--spip-form-input-padding-x) center;
background-size: 21px 21px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* Boutons de soumission (voir aussi dans boutons.css) */
.formulaire_spip input.submit,
.formulaire_spip input.reset,

Loading…
Cancel
Save