J'ai appliqué les CSS suivants à un formulaire Soumettre le bouton: sous Windows, quel que soit le navigateur (c.-à-d. / Firefox / Chrome), cette augmentation Le formulaire Soumettre le bouton et donnez le bouton d'espacement des boutons de 6px. Cependant, sur OS X (Mac), le bouton de soumission du formulaire n'est pas stylisé du tout. Signification, la taille de la police est la valeur par défaut et aucun rembourrage n'est appliqué. aucune idée de la manière dont je peux faire un bouton de soumission de formulaire plus gros sur OS X (Mac)?
5 Réponses :
Faites un bouton d'image. Safari ne déposera pas de boutons, ou des cases à cocher ou des menus déroulants, etc.
Safari 4 sous Windows le permet. Offrent-ils différentes fonctionnalités sous OS X?
Les commandes de forme de style sont très problématiques. Voir Cet exemple - tandis que d'autres navigateurs appliquent des styles, tous les boutons ont l'air presque identique dans safari.
Une solution consiste à utiliser un avec l'attribut onclick javascript. De cette façon, vous pouvez appliquer normalement CSS normalement. Je vous recommanderais de commencer avec un bouton puis à l'aide de JS pour basculer dans le code mieux à la recherche comme amélioration progressive.
0 commentaires
dans Safari 4, le rembourrage et les tailles ne prennent pas effet sur des boutons Soumettre, sauf si vous définissez un arrière-plan ou une bordure. Exemple:
Si j'ajoute une couleur d'arrière-plan, cela ne le rend pas comme un bouton natif
Correct. Safari ne vous permet pas de créer une touche natale plus grande que la valeur par défaut - seulement plus petite. Voir webkit.org/blog/28/buttons pour plus de détails.
Nan. Si vous voulez avoir l'air natif avec un gros texte, votre seule option est d'afficher le look natif avec CSS-E.G., une image d'arrière-plan. Apple protège de leur apparence.
Le même problème se produit dans le chrome pour Mac aussi, la réponse de Justin fonctionne bien.
au lieu d'utiliser
Vous devez ajouter ceci à votre CSS:
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
Cela devrait être la solution!