ホームページ > 記事 > ウェブフロントエンド > ドロップダウンリストの矢印を表示させずにhtmlを実装する方法
ドロップダウン リストの矢印を表示しない方法: まず、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 サイトの他の関連記事を参照してください。