Submit appearance sur ipad/iphone avec ▶

Bonjour,
Après avoir mis un certain temps à régler le css de mes champs select, input[type=submit] pour qu'ils s'affichent de la même façon sur tous les navigateurs, je vois que IOS remplace mon submit par un bouton de base. Ô horreur. Enfin c'est surtout ma flèche en code décimal qui perturbe Safari IOS, si je mets du texte : tout va mieux, plus d'aspect bouton (mais le texte + petit en version input).
J'ai testé mon submit en version input et en version bouton : pareil.
Vous pouvez voir le résultat sur codepen (avec un ipad ou un iphone) : pen/qKvGxE
Si quelqu'un avait une idée de css pour remédier à ça, même de css uniquement pour IOS avec media queries… Ce serait top !!
Merci d'avance à ceux-celles qui se pencheront sur ce problème…

Bonjour,
il y a plusieurs façons de réaliser cette flèche via les caractères unicode :

⏵	⏵	\u23F5
▶	▶	\u25B6
►	►	\u25BA

laquelle utilises tu ?

J'ai essayé toutes les valeurs proposées pour cette flèche, rien n'y fait. En désespoir de cause, j'ai fini par mettre "GO" à la place de la flèche, pour les ipad/iphones uniquement.

Dans ce cas tu peux toujours utiliser un élément avec un peu de CSS pour afficher une flèche droite

Code:

---

<button type="submit"><span class="fleche-droite"></span></button>

---

avec le CSS suivant cela devrait le faire

Code:

---

1 2 3 4 5 6 7 8 9 10 11

.fleche-droite { display: block; width: 0; height: 0; margin: auto; border-width: .75em 1.75em; border-style: solid; border-color: transparent; border-right-width: 0; border-left-color: currentColor; }

---

Bonjour,

+1 NoSmoking

• CSS triangle generator

• Table des caractères Unicode/U25A0

Code:

---

1 2	<input type="submit" value="&#x25B6;" /> <button type="submit" title="GO">&#x25B6;</button>

---

Mais bien sûr, il faut créer une forme, génial ! Merci à vous 2…

Finalement, je me retrouve avec un input submit dont la flèche est géométrique (avec border width) mais du coup mes select qui ont une flèche texte (avec un span class ::after) n'ont pas la même taille sous windows (sous Mac tout est OK avec Safari, FF, Opéra, Chrome).
Du coup je me demande comment faire pour utiliser la technique géométrique avec mes ::after qui ont un fond carré de couleur, je ne peux donc pas utiliser width et height: 0;
Auriez-vous une idée ?
Le CSS :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

.perfo::after, .perfo:after { position: absolute; right: 0; top: 0; width: 31px; height: 28px; outline: none; content: ""; color: #FFF; background-color: #099; line-height: 30px; text-align: center; pointer-events: none;

---

Et le html :

Code:

---

1 2 3 4 5 6 7 8

<span class="perfo"> <select onChange="window.location=this.options[this.selectedIndex].value;"> <option value="#" selected>option 1</option> <option value="#">option 2</option> <option value="#">option 3</option> </select> </span>

---

Bonjour,

que veux-tu qu'on fasse avec tes 2 bouts de code ? :koi:

Citation:

---

Du coup je me demande comment faire pour utiliser la technique géométrique avec mes ::after qui ont un fond carré de couleur, je ne peux donc pas utiliser width et height: 0;

---

Il te faut utiliser le ::before pour faire ton fond et le ::after pour faire ta fléche.

Cela pourrait donner quelque chose comme par exemple

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

.perfo { position: relative; font-size: 5em; color: #FFF; background-color: #099; } .perfo::before, .perfo::after { content: ""; display: block; position: absolute; } .perfo::before { top: 0; right: 0; width: 1em; height: 1em; background-color: inherit; } .perfo::after { top: .25em; right: .25em; width: 0; height: 0; border-width: .5em .25em; border-color: transparent; border-style: solid; border-top-color: currentColor; border-bottom-width: 0; }

---

Remarque : pour modifier la taille (dépend de font-size) et les couleurs il suffit de modifier ces propriétés du sélecteur .perfo ou surcharger la classe.

Merci NoSmoking ! Je pensais à tort que le before devait être avant, donc à gauche dans mon esprit (embrumé), et le after à droite… Mais en absolute avec un z-index on fait ce qu'on veut… J'ai tout mis en px (je me méfie de la taille de police qui varie d'une plateforme à l'autre…).
Un dernier conseil : Je déclare à chaque fois .perfo::before, .perfo:before {} et .perfo::after, .perfo:after {} pour les anciens navigateurs.
Qu'en penses-tu ? Y a-t-il un ordre meilleur que l'autre entre le : et le :: ?
PS. Je viens de tester sur NetRender, c'est pas du tout bon de mettre d'abord la syntaxe CSS3 puis la CSS2, je vois que ça s'affiche mal ds IE9, c'est toujours le chaos sur IE8 quoiqu'on fasse, donc mieux vaut CSS2 puis CSS3, voire juste CSS3… Mais je n'ai pas testé sur les autres navigateurs…

Citation:

---

J'ai tout mis en px (je me méfie de la taille de police qui varie d'une plateforme à l'autre…)

---

C'est à toi de le préciser dans le CSS et utiliser les unités em - rem c'est respecter le choix de l'utilisateur qui doit pouvoir faire ce qu'il veut sur son navigateur (choix de la taille de la police par défaut).

Citation:

---

Un dernier conseil : Je déclare à chaque fois .perfo::before, .perfo:before {} et .perfo::after, .perfo:after {} pour les anciens navigateurs.

---

La syntaxe des pseudo-éléments est avec un double point en CSS3, ::before, ::after, contrairement au CSS2 où il ne faut en mettre qu'un :before.

Les deux syntaxes sont valides mais les :: ne sont pas reconnus par les navigateurs ne supportant pas le CSS3 et le sélecteur ne sera pas valide sur ceux ne le supportant pas.

Ce qu'il faut savoir c'est que lorsqu'un sélecteur n'est pas valide c'est le bloc de déclaration tout entier qui est ignoré c'est pour cette raison que l'on ne peut pas regrouper les sélecteurs.
Il faut dans ce cas écrire

Code:

---

1 2 3 4 5 6 7 8

element:before { content: ""; /* le reste */ } element::before { /* déclaration ignorée sur les navigateurs obsolètes */ content: ""; /* le reste */ }

---

Si tu cibles des navigateurs obsolètes et attendu que les deux syntaxes sont valides une simple déclaration avec :before est suffisante, les navigateurs modernes ajoutant le 2^éme double point. L'utilisation de simple ou double point dépend donc de la cible visée.

Une autre chose qu'il faut savoir c'est que le valeur currentColor n'est reconnue qu'à partir de IE9 mais est bien pratique pour n'avoir à modifier sa valeur, via la propriété color, qu'au niveau du parent. Son utilisation va donc également dépendre des navigateurs ciblés.

Merci encore, NoSmoking. Je crois que pour faire simple, je ne mettrai que le CSS2 pour quelque temps encore… (en tout cas pour ces after et before qui doivent s'afficher correctement pour la compréhension du site).