1. #1
    Membre à l'essai
    Profil pro
    Inscrit en
    mars 2010
    Messages
    31
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mars 2010
    Messages : 31
    Points : 11
    Points
    11

    Par défaut 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…

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    12 736
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 12 736
    Points : 31 445
    Points
    31 445

    Par défaut

    Bonjour,
    il y a plusieurs façons de réaliser cette flèche via les caractères unicode :
    ⏵ \u23F5
    ▶ \u25B6
    ► \u25BA
    laquelle utilises tu ?

  3. #3
    Membre à l'essai
    Profil pro
    Inscrit en
    mars 2010
    Messages
    31
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mars 2010
    Messages : 31
    Points : 11
    Points
    11

    Par défaut

    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.

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    12 736
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 12 736
    Points : 31 445
    Points
    31 445

    Par défaut

    Dans ce cas tu peux toujours utiliser un élément avec un peu de CSS pour afficher une flèche droite
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <button type="submit"><span class="fleche-droite"></span></button>
    avec le CSS suivant cela devrait le faire
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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;
    }

  5. #5
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    12 366
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 12 366
    Points : 24 839
    Points
    24 839

    Par défaut

    Bonjour,

    +1 NoSmoking




    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <input type="submit" value="&#x25B6;" />
    <button type="submit" title="GO">&#x25B6;</button>
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  6. #6
    Membre à l'essai
    Profil pro
    Inscrit en
    mars 2010
    Messages
    31
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mars 2010
    Messages : 31
    Points : 11
    Points
    11

    Par défaut

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

  7. #7
    Membre à l'essai
    Profil pro
    Inscrit en
    mars 2010
    Messages
    31
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mars 2010
    Messages : 31
    Points : 11
    Points
    11

    Par défaut

    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 html : Sélectionner tout - Visualiser dans une fenêtre à part
    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>

  8. #8
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    12 366
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 12 366
    Points : 24 839
    Points
    24 839

    Par défaut

    Bonjour,

    que veux-tu qu'on fasse avec tes 2 bouts de code ?
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  9. #9
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    12 736
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 12 736
    Points : 31 445
    Points
    31 445

    Par défaut

    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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.

  10. #10
    Membre à l'essai
    Profil pro
    Inscrit en
    mars 2010
    Messages
    31
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mars 2010
    Messages : 31
    Points : 11
    Points
    11

    Par défaut

    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…

  11. #11
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    12 736
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 12 736
    Points : 31 445
    Points
    31 445

    Par défaut

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

    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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.

  12. #12
    Membre à l'essai
    Profil pro
    Inscrit en
    mars 2010
    Messages
    31
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mars 2010
    Messages : 31
    Points : 11
    Points
    11

    Par défaut

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

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Lotus sur ipad-iphone, comment chercher une erreur
    Par Madmax61 dans le forum Lotus Notes
    Réponses: 0
    Dernier message: 16/09/2013, 10h15
  2. Lire flux rtsp d'une caméra sur Ipad/Iphone
    Par Ahniwo dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 03/05/2013, 22h09
  3. Réponses: 0
    Dernier message: 18/03/2011, 17h42
  4. Réponses: 0
    Dernier message: 09/06/2010, 17h25

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo