select下拉選單美化程式碼例項
自帶的select下拉選單美觀度實在不怎麼樣,並且不容易美化,當然我們可以模擬實現select下拉選單,但是程式碼稍顯複雜,不過也可以通過簡單的CSS實現此效果,下面通過例項簡單作一下介紹。
程式碼如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>美化select下拉選單-螞蟻部落</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>螞蟻部落一</option> <option>螞蟻部落二</option> <option selected>螞蟻部落三</option> <option>螞蟻部落四</option> </select> </div> </body> </html>
以上程式碼實現了實現了select下拉框美化效果,當然這裡也談不上美觀,因為在這裡只是介紹一下它的實現原理,以供大家改造之用,下面簡單介紹一下它的實現過程:
實現原理:
其實select下拉選單美化最讓人蛋疼的地方就是向下的箭頭,在這裡我們在select下拉選單外面套了一個div,並且div的寬度小於select下拉選單的寬度,這樣的目的是將select下來選單的箭頭給遮擋,然後再給次div設定一個背景圖片作為下拉箭頭,這樣就實現了我們想要的效果。
相關文章
- jQuery美化select下拉選單程式碼例項jQuery
- 模擬美化select下拉選單程式碼例項
- jQuery操作select下拉選單程式碼例項jQuery
- 模擬select下拉選單程式碼例項
- select下拉選單項互換效果程式碼例項
- javascript刪除select下拉選單項程式碼例項JavaScript
- 原生javascript操作select下拉選單程式碼例項JavaScript
- select下拉選單級聯效果例項程式碼
- select級聯下拉選單程式碼例項分析
- jQuery 美化select下拉選單jQuery
- 模擬實現select下拉選單例項程式碼單例
- 刪除和新增select下拉選單option項程式碼例項
- select下拉選單多級級聯效果程式碼例項
- js模擬實現select下拉選單程式碼例項JS
- javascript新增和刪除select下拉選單option項程式碼例項JavaScript
- 替換預設select下拉選單箭頭程式碼例項
- javascript設定select下拉選單readonly只讀程式碼例項JavaScript
- css二級下拉選單程式碼例項CSS
- jquery新增或者刪除select下拉選單項程式碼jQuery
- 滑鼠懸浮出現下拉選單程式碼例項
- css水平下拉導航選單程式碼例項CSS
- jQuery操作select下拉選單程式碼jQuery
- 選中select下拉選單項提交表單
- javascript模擬美化select下拉選單效果詳解JavaScript
- css三級下拉導航選單程式碼例項CSS
- select下拉選單跳轉效果程式碼
- jQuery操作select下拉選單常用程式碼jQuery
- 表單提示美化效果程式碼例項
- select下拉選單新增不重複項
- JS列表的下拉選單元件(仿美化控制元件select)JS控制元件
- 點選文字框彈出可檢索下拉選單程式碼例項
- 純原生javascript下拉框表單美化例項教程JavaScript
- jQuery設定select選中項程式碼例項jQuery
- table表格美化程式碼例項
- input range美化程式碼例項
- 如何清空select下拉選單的所有option項
- 具有淡入淡出效果的下拉導航選單例項程式碼單例
- 純CSS實現的二級下拉選單效果程式碼例項CSS