select下拉選單美化程式碼例項

admin發表於2017-02-03

自帶的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設定一個背景圖片作為下拉箭頭，這樣就實現了我們想要的效果。

相關文章