Méthode pour définir le type d'entrée = file style_HTML/Xhtml_Web production de pages

Pourquoi embellir le contrôle des fichiers ? Imaginez, les autres enfants sont tous bien habillés et beaux, mais deux d'entre eux ne vous méprisent pas.

Le contrôle de fichier d'origine est comme ceci :

Ne pensez pas que ceci est composé d'un texte et d'un bouton, c'est un contrôle , le code html est :

Copiez le code

Le code est le suivant :

>
Dans ce cas Nous utilisons un texte et un bouton pour afficher le style de ce fichier. Le code html est le suivant :

Copier le code<.>Codez comme suit :

='btn' value='Parcourir.. .'


< ;/form>
div>


La couche externe de div sert à fournir une référence de position pour l'entrée à l'intérieur, car elle doit être positionnée relativement lors de l'écriture des styles, de sorte que le contrôle de fichier réel couvre celui simulé, puis masque le contrôle de fichier (même si le contrôle de fichier n'est pas visible), donc le code CSS est comme ceci :

Copiez le code

Le code est le suivant : .file-box{ position:relative;width:340px}

.txt{ hauteur : 22px; bordure:1px solide #cdcdcd; largeur:180px;}

.btn{ background- color:#FFF; bordure:1px solide #CDCDCD;hauteur:24px;}

.file{ position :absolu; haut:0; droite:80px; hauteur:24px; filtre:alpha(opacité:0);opacité: 0;largeur:260px }




Rendu :

Enfin laissé une DÉMO : cliquez pour voir la démo

≪/tête>

Astuce : Vous pouvez modifier une partie du code avant d'exécuter