ドロップダウンリストの矢印を表示させずにhtmlを実装する方法-htmlチュートリアル-php.cn

ドロップダウンリストの矢印を表示させずにhtmlを実装する方法

醉折花枝作酒筹

リリース： 2023-01-05 16:10:32

オリジナル

3891 人が閲覧しました

ドロップダウンリストの矢印を表示しない方法: まず、select 要素と div 要素の幅を設定します。ここで、div 要素の幅は select 要素の幅より 20 ピクセル大きく、次に設定します。この効果を実現するには、select 要素に「overflow:hidden」を追加します。

ドロップダウンリストの矢印を表示させずにhtmlを実装する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

html 選択ドロップダウン矢印非表示

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

ログイン後にコピー

これは通常の状態での効果で、矢印は次のとおりです:

ドロップダウンリストの矢印を表示させずにhtmlを実装する方法

We矢印を非表示にするために必要なのは、外側の div で overflow: hidden; を設定することだけです。

.DivSelect
        {
            overflow: hidden; /* 隐藏了小三角，宽度为比select宽度少20px */
        }

ログイン後にコピー

効果は次のとおりです:

ドロップダウンリストの矢印を表示させずにhtmlを実装する方法

この状況により、一部の部分には境界線がないため、美しさのために矢印を隠すときの場合は、フチなしに設定されます。

推奨学習: html ビデオチュートリアル

以上がドロップダウンリストの矢印を表示させずにhtmlを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。