Maison > interface Web > tutoriel HTML > Comment implémenter le HTML sans afficher la flèche de la liste déroulante

Comment implémenter le HTML sans afficher la flèche de la liste déroulante

醉折花枝作酒筹
Libérer: 2023-01-05 16:10:32
original
3954 Les gens l'ont consulté

Comment ne pas afficher la flèche de la liste déroulante : définissez d'abord la largeur de l'élément de sélection et de l'élément div, où la largeur de l'élément div est 20px supérieure à la largeur de l'élément de sélection, puis définissez ; "overflow:hidden" dans l'élément select pour obtenir cet effet.

Comment implémenter le HTML sans afficher la flèche de la liste déroulante

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

La flèche déroulante de sélection html se cache

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .width5 {
            width: 122px;
        }
        .width7
        {
            width: 142px;
        }
        /*设置Select样式*/
        .SelectList
        {
            height: 32px;
            line-height: 32px;
            overflow:hidden;
        }
    </style>
</head>
<body>
<div class="DivSelect width5">
    <select  class="SelectList width7">
        <option>双铜纸</option>
        <option>双胶纸</option>
    </select>
</div>
</body>
</html>
Copier après la connexion

Voici l'effet à l'état normal, avec des flèches :

Comment implémenter le HTML sans afficher la flèche de la liste déroulante

Nous il suffit de Set overflow: Hidden; dans le div externe pour masquer la flèche.

.DivSelect
        {
            overflow: hidden; /* 隐藏了小三角,宽度为比select宽度少20px */
        }
Copier après la connexion

L'effet est le suivant :

Comment implémenter le HTML sans afficher la flèche de la liste déroulante

En raison de cette situation, certaines parties n'ont pas de bordures, donc lorsque vous cachez la flèche, par souci de beauté, il sera défini sur sans bordure.

Apprentissage recommandé : Tutoriel vidéo 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!

Étiquettes associées:
source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal