centos Ubuntu Python php 程序员 Windows linux shell apache nginx mysql java 微软 Firefox 编程 Android 云计算 google 开源 wordpress

select下拉菜單美化簡單美化效果

默認狀態下的select下拉菜單簡直是醜爆了,所以下面就介紹一下一個簡單的方式對select下拉菜單進行美化,下面就是一段這樣的代碼實例,當然也不夠美觀,這裏只是提供一種美化的思路,在實際應用中可以進行更為優秀的美化,代碼如下:

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

<!DOCTYPE html> <html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>蚂蚁部落</title>

<style type="text/css">

.select{

  margin-top:0px;

  outline:none;

  border:1px solid #BBBBBB;

  border-radius:4px;

  position:relative;

  width:170px;

}

.text{

  height:40px;

  -webkit-appearance:none;

  appearance:none;

  border:none;

  font-size:18px;

  padding:0px 10px;

  display:block;

  width:100%;

  -webkit-box-sizing:border-box;

  box-sizing:border-box;

  background-color:#FFFFFF;

  color:#333333;

  border-radius:4px;

}

</style>

</head>

<body>

<div class="select">

<select  class="text">

  <option>--选择科目--</option>

  <option>css教程</option>

  <option>div教程</option>

  <option>javascript教程</option>

  <option>jquery教程</option>

</select>

</div>

</body>

</html>

延伸阅读

    评论