Maison > interface Web > tutoriel CSS > le corps du texte

Comment puis-je modifier le curseur des éléments d'entrée de fichier dans différents navigateurs ?

Susan Sarandon
Libérer: 2024-11-25 02:49:14
original
648 Les gens l'ont consulté

How Can I Change the Cursor for File Input Elements in Different Browsers?

Modification du type de curseur pour les éléments d'entrée de fichier

Les utilisateurs peuvent rencontrer des difficultés pour modifier le type de curseur pour les éléments d'entrée de type « fichier ». Les tentatives de définition de la propriété du curseur dans un bloc de style CSS (comme dans l'exemple fourni) peuvent ne pas donner les résultats souhaités.

Solution :

Le comportement de l'entrée de fichier les éléments varient selon les différents navigateurs :

  • Firefox : Firefox a résolu le problème et autorise le curseur personnalisation.
  • Safari : Safari ne prend en charge aucune méthode de modification du type de curseur.
  • Chrome : Chrome prend en charge la personnalisation du curseur à l'aide de : :webkit-file-upload-button pseudo-class.

Pour résoudre cette incohérence, une solution partielle pour Chrome (et potentiellement Opera avec son implémentation WebKit) est :

input[type=file], /* FF, IE7+, chrome (except button) */
input[type=file]::-webkit-file-upload-button { /* chromes and blink button */
    cursor: pointer; 
}
Copier après la connexion

Explication :

La définition de style cible à la fois l'intégralité de l'élément d'entrée et la pseudo-classe représentant le bouton de téléchargement de fichiers. Le comportement de Chrome peut s'expliquer par son traitement de la propriété du curseur. Bien qu'elle permette de définir le curseur pour le champ de saisie, elle n'hérite pas du paramètre du bouton à l'intérieur.

Cette solution vous permet de modifier le type de curseur pour les éléments de saisie de fichier dans Chrome, offrant ainsi une expérience utilisateur cohérente dans tous les domaines. plusieurs navigateurs.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal