Comment puis-je modifier les images des boutons de saisie à l'aide de CSS et gérer les problèmes de compatibilité du navigateur ?

Modification des images des boutons de saisie avec CSS

Lors de la création d'un bouton de saisie avec une image en utilisant HTML, l'attribut "type=image" est utilisé avec une URL source. Cependant, styliser le bouton avec CSS devient un défi car l'attribut "src" ne peut pas être modifié via CSS.

Style CSS pour les boutons de saisie sans image

Pour styliser un bouton de saisie avec une apparence d'image utilisant CSS, pensez à changer le type de bouton en « soumettre ». Cela supprime l'exigence d'une source d'image.

<input type="submit" class="myButton" value="">

Dans le fichier CSS, définissez la classe "myButton" comme suit :

.myButton {
    background-image: url(/images/Btn.PNG);
    background-repeat: no-repeat;
    cursor: pointer;
    width: 200px;
    height: 100px;
    border: none;
}

Cette approche vous permet d'appliquer des effets de survol en définir une classe "myButton:hover".

Navigateur Compatibilité

Safari pose un défi en ne prenant en charge la méthode de style susmentionnée pour aucun bouton. Pour prendre en charge Safari, pensez à placer une image et à utiliser JavaScript pour la fonction onclick qui soumet le formulaire.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!