不顯示下拉清單箭頭的方法:先給select元素和div元素設定寬度,其中div元素的寬度比select元素寬度多20px;然後在select元素裡設定「overflow:hidden」即可實現效果。
本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。
html select 下拉箭頭隱藏
<!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>
這是正常狀態下的效果,擁有箭頭:
我們只需要在外面div裡設定overflow: hidden;即可實現隱藏箭頭。
.DivSelect { overflow: hidden; /* 隐藏了小三角,宽度为比select宽度少20px */ }
效果如圖:
由於該情況,有一部分沒有邊框,因此隱藏箭頭時,為了美觀,會將其設定成無邊框。
推薦學習:html影片教學
以上是如何實作html不顯示下拉清單的箭頭的詳細內容。更多資訊請關注PHP中文網其他相關文章!