ホームページ > 記事 > ウェブフロントエンド > ドロップダウンリストの矢印を表示させずにhtmlを実装する方法
ドロップダウンリストの矢印を表示させずにhtmlを実装する方法
- 醉折花枝作酒筹オリジナル
- 2021-04-22 11:22:013885ブラウズ
ドロップダウン リストの矢印を表示しない方法: まず、select 要素と div 要素の幅を設定します。ここで、div 要素の幅は select 要素の幅より 20 ピクセル大きく、次に設定します。この効果を実現するには、select 要素に「overflow:hidden」を追加します。
このチュートリアルの動作環境: 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>これは通常の状態での効果で、矢印は次のとおりです:
We矢印を非表示にするために必要なのは、外側の div で overflow: hidden; を設定することだけです。
.DivSelect
{
overflow: hidden; /* 隐藏了小三角，宽度为比select宽度少20px */
}効果は次のとおりです:
この状況により、一部の部分には境界線がないため、美しさのために矢印を隠すときの場合は、フチなしに設定されます。
推奨学習: html ビデオ チュートリアル
以上がドロップダウンリストの矢印を表示させずにhtmlを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。