Comment implémenter le contrôle de style de input[type=file] en utilisant du CSS pur (exemple de code)-tutoriel CSS-php.cn

Comment implémenter le contrôle de style de input[type=file] en utilisant du CSS pur (exemple de code)

不言

Libérer： 2018-11-06 11:02:51

original

4574 Les gens l'ont consulté

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 :

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 - 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>

Copier après la connexion

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!