web前端html實例-select下拉菜單美化代碼
阿新 • • 發佈：2019-05-07
hidden kit select下拉框 spa alt view 原理 class 模擬 
自帶的select下拉菜單美觀度實在不怎麽樣，並且不容易美化，當然我們可以模擬實現select下拉菜單，但是代碼稍顯復雜，不過也可以通過簡單的CSS實現此效果，下面通過實例簡單作一下介紹。
代碼如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>web前端學習扣qun：731771211 每日分享技術，學術交流</title> <style type="text/css"> .select_style{ width:240px; height:30px; overflow:hidden; background:url(mytest/demo/bg.jpg) no-repeat 215px; border:1px solid #ccc; -moz-border-radius:5px; /* Gecko browsers */ -webkit-border-radius:5px; /* Webkit browsers */ border-radius:5px; margin:150px; } .select_style select{ padding:5px; background:transparent; width:268px; font-size:16px; border:none; height:30px; -webkit-appearance:none; /*for Webkit browsers*/ } </style> </head> <body> <div class="select_style"> <select name="select"> <option>星期1</option> <option>星期2</option> <option selected>星期3</option> <option>星期4</option> </select> </div> </body> </html>
以上代碼實現了實現了select下拉框美化效果，當然這裏也談不上美觀，因為在這裏只是介紹一下它的實現原理，以供大家改造之用，下面簡單介紹一下它的實現過程:
實現原理:
其實select下拉菜單美化最讓人蛋疼的地方就是向下的箭頭，在這裏我們在select下拉菜單外面套了一個div，並且div的寬度小於select下拉菜單的寬度，這樣的目的是將select下來菜單的箭頭給遮擋，然後再給次div設置一個背景圖片作為下拉箭頭，這樣就實現了我們想要的效果。
web前端html實例-select下拉菜單美化代碼