Maison > Article > interface Web > Comment implémenter le contrôle de style de input[type=file] en utilisant du CSS pur (exemple de code)
Comment implémenter le contrôle de style de input[type=file] en utilisant du CSS pur (exemple de code)
- 不言original
- 2018-11-06 11:02:514561parcourir
Le contenu de cet article explique comment utiliser du CSS pur pour implémenter le contrôle de style de input[type=file] (exemple de code). Les amis dans le besoin peuvent s'y référer.
Si vous recherchez des solutions à des questions courantes sur la façon d'avoir un contrôle total de l'apparence, les résultats peuvent entrer dans l'une des 3 catégories suivantes : 714779e36f6b8fe3da1575391740131b
Nécessite Javascript.
ne fonctionne pas dans le navigateur principal.
Ne fournit pas réellement un contrôle complet du style.
Les trois ci-dessus correspondent parfaitement à toutes les réponses que j'ai trouvées en ligne. Mais vous pouvez le faire avec du CSS pur. Il nécessite un élément d'emballage pour accrocher le style (l'entrée elle-même est masquée car son style est très limité/restreint). La sémantique voudra peut-être transformer cela en bfdf57554631c62e63917d588904f58a - en passant, il n'y a rien de mal à avoir plusieurs étiquettes par élément. Jetons un coup d'œil à l'exemple suivant du code
comme suit :
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.fileContainer {
overflow: hidden;
position: relative;
}
.fileContainer [type=file] {
cursor: inherit;
display: block;
font-size: 999px;
filter: alpha(opacity=0);
min-height: 100%;
min-width: 100%;
opacity: 0;
position: absolute;
right: 0;
text-align: right;
top: 0;
}
/* Example stylistic flourishes */
.fileContainer {
background: red;
border-radius: .5em;
float: left;
padding: .5em;
}
.fileContainer [type=file] {
cursor: pointer;
}
}
</style>
</head>
<body>
<label class="fileContainer">
点击这里实现文件上传!
<input type="file"/>
</label>
</body>
</html>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!