communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel HTML > Embellissement des boutons personnalisés du fichier d'entrée (démo)_HTML/Xhtml_production de pages Web

Embellissement des boutons personnalisés du fichier d'entrée (démo)_HTML/Xhtml_production de pages Web

WBOY
Libérer： 2016-05-16 16:40:48
original
1484 Les gens l'ont consulté

J'ai déjà écrit un article comme celui-ci mais j'ai utilisé un script js. L'avantage est qu'il peut afficher le chemin du fichier.

Si vous ne pouvez pas voir le chemin et afficher uniquement le bouton personnalisé, il existe d'autres méthodes. Ce qui suit n'est qu'une technique CSS.

La clé est de donner une taille de police au champ du fichier et de définir une valeur relativement grande pour que la majuscule du formulaire change (l'apparence de chaque navigateur est différente, mais la majuscule est modifiée) comme indiqué ci-dessous :

entrée{font-size:100px;}

Utilisez ensuite la position et la transparence pour obtenir l'effet souhaité. Le code spécifique est le suivant :

Copier le code
Le code est le suivant :

.fileInputContainer{
hauteur:256px;
background:url(http://files.jb51.net/file_images/article/201212/2012122514125641.png);
position:relative;
largeur : 256px;
}
.fileInput{
hauteur:256px;
débordement: caché;
taille de police: 300px;
position:absolue;
droite:0;
top:0 ;
opacité: 0;
filtre:alpha(opacity=0);
curseur:pointeur;
}

Copier le code
Le code est le suivant :




DÉMO :

Étiquettes associées：
file input 美化
source：php.cn
Article précédent：Introduction à la sémantique des balises HTML_HTML/Xhtml_Production de pages Web Article suivant：Comment transférer la valeur de la liste déroulante de sélection vers l'identifiant pour implémenter la production de pages code_HTML/Xhtml_Web
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
Derniers numéros
Impossible d'obtenir l'élément d'entrée du site Web J'essaie donc d'obtenir un élément d'entrée de Twitter mais lorsque je l'exécute, cela con...
Depuis 2024-04-06 18:59:57
0
1
442
Événements de survol JavaScript sur des pseudo-éléments spécifiques au fournisseur Il s'agit de HTMLinput.$("input[type='range']::-webkit-slider-thumb").on('hover'...
Depuis 2024-04-06 15:35:24
0
1
274
Afficher un tableau imbriqué d'objets dans un tableau HTML en itérant J'ai l'entrée suivante contenant un tableau d'objets imbriqués. summary est le tableau d'o...
Depuis 2024-04-05 14:11:42
0
1
1373
Laisser React restituer la balise de fermeture de l'entrée ? J'ai une demande inhabituelle. Mon site Web est construit à l'aide de React et je souhaite...
Depuis 2024-04-03 23:01:01
0
1
320
Plugin Shopware 6 : Comment supprimer la configuration booléenne et la migrer vers une configuration à sélection multiple J'ai un plugin Shopware6 qui est actuellement configuré avec une valeur booléenne reviewSk...
Depuis 2024-04-03 23:09:28
0
1
410
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal