Problème Input Safari html [Résolu]

Signaler
Messages postés
2
Date d'inscription
vendredi 17 avril 2020
Statut
Membre
Dernière intervention
12 mai 2020
-
 Lazi -
Bonjours j'ai un petit problème j'ai coder une page en PHP et HTML tout ce passe très bien sauf quand je change de navigateur, je m'explique le button connexion n'est pas du tout le même sure chrome que sur safari
le problème ne concerne pas PHP mais l'input
(<input type="submit" value="Connexion" id="sub" class="button" >)
et ma classe
.button
{
background-color:yellow;
font-family: Arial, Helvetica, sans-serif;
border: yellow;
height: 45px;
width:160px ;
font-size: 20px;
border-radius: 30px;


}
merci d'avance

1 réponse

Bonjour,
vous pouvez commencer par corriger border qui est le regroupement de 3 propriétés soit en indiquant border-color uniquement soit en complétant les 3 propriétés.
Il se peut que l'un ou l'autre des navigateurs soit plus respectueux(voir aussi firefox et edge qui sont pas mal utilisés bien sûr) d'un bon CSS et des erreurs.

Les boutons par défaut ont une apparence qui dépends du navigateur.
En l’occurrence il ne s'agit pas d'un bouton mais d'un input de type submit et lui aussi aura une apparence par défaut selon le navigateur.
<!-- pour bien illustrer la différence--->
voici un submit de formulaire qui a la propriété par défaut(on peut l'enlever par du javascript) de "soumettre" c'est à dire l'envoyer:

<input type="submit" value="Envoi du formulaire" />

Et un bouton qui peut remplacer un input type submit en utilisant le type submit:

<button type="submit">Envoi du formulaire</button>



Il faut donc supprimer toute les apparences par défaut si vous voulez qu'il y ait la même apparence dans tous les navigateurs avant de personnaliser par vos styles.
L'inconvénient de la personnalisation c'est que sans personnaliser l'apparence indique directement et clairement à l'utilisateur habitué à l'apparence dans son navigateur.
L'avantage c'est un bouton plus joli et plus en accord avec la charte graphique bien entendu.

Voilà quelque piste qui permette de supprimer l'apparence par défaut pour chaque navigateur:

https://stackoverflow.com/questions/12297600/how-to-remove-default-chrome-style-for-select-input
avec le lien (pour un input text mais c'est les même propriétés):

https://stackoverflow.com/questions/935559/remove-safari-chrome-textinput-textarea-glow/935572#935572

Bien sûr tester dans chaque navigateur reste essentiel pour vérifier que chaque règle CSS donne une apparence identique, des détails existent dans l'interprétation de certaines règles et balises(cet peuvent provoquer des décalages de quelques pixels par exemple).