Un exemple de tutoriel sur la création d'un magnifique style de contrôle de téléchargement de fichiers

En tant que programmeur front-end, je rencontre souvent des éléments tels que des formulaires dans mon travail. Cependant, les styles des autres contrôles de saisie du formulaire sont toujours faciles à modifier. Cependant, le seul contrôle de téléchargement de fichiers dont le type d'entrée est fichier n'est peut-être pas si facile à habiller. Il se trouve que moi, un débutant, j'ai également rencontré ce problème récemment au travail. Après l'avoir résolu, réfléchissez au résumé de la vie. J'ai donc enregistré cette simple démo.

code html

<form action=""method="post"enctype="multipart/form-data">
    <a href="#" class="a-upload"><input type="file" name="file" id="file">点击这里上传图片</a>

</form>

code css

 .a-upload {
    padding: 4px 10px;
    width: 200px;
      height: 30px;
      box-sizing: border-box;
    line-height: 20px;
    position: relative;
    cursor: pointer;
    color: #888;
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    display: inline-block;
    *display: inline;
    *zoom: 1;
   top: 5px;
}

.a-upload  input {
    position: absolute;
    font-size: 100px;
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer;
     width: 200px;
      height: 30px;
      left: 0;
      top: 0;
}

.a-upload:hover {
    color: #444;
    background: #eee;
    border-color: #ccc;
    text-decoration: none
}

Résultats

【Recommandations associées 】

1. Tutoriel vidéo HTML en ligne gratuit

2 Manuel de développement HTML

3. cn tutoriel vidéo html5 original

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!