HTML CSS шпаргалка Рецепты, статьи, советы, приемы html css

«
»

Стилизация select-а с помощью CSS+JS

В этой заметке посмотрим, как стилизовать select.

Стандартными средствами у селекта можно поменять только цвет, фон и бордер. Полностью изменить select можно только с помощью ява скрипта.

Чтобы стилизовать select, нам понадобиться jquery, плагин к нему и знания в css. Данный плагин сам select делает невидимым и эмулирует его с помощью списка ul li.

Ниже приведен код, ссылка на пример и ссылка на скачивание:

1
2
3
4
5
6
7
8
9
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Стилизация Select</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="select.js"></script>
<script type="text/javascript">$(document).ready(function(){$('.selectBlock').sSelect();});</script>
<style type="text/css">
	body{
		padding:100px;
		margin:0;
		background:#CCC;
		color:#000;
	}
	.newListSelected{
		width:360px;
		margin:0 auto;
	}
	.selectedTxt{
		width:320px;
		height:35px;
		padding:0 30px 0 10px;
		overflow:hidden;
		background:url(select.png);
		color:#000;
		font-size:24px;
		line-height:32px;
		zoom:1;
		position:relative;
		z-index:1;
	}
	.newList{
		list-style:none;
		padding:0;
		margin:0 0 0 4px;
		width:352px;
		position:absolute;
		z-index:500;
		top:35px;
	}
	.newList li{padding:0;margin:0;}
	.newList li a{
		display:block;
		background:#FFF;
		opacity:0.85;
		filter:alpha(opacity=85);
		font-size:18px;
		padding:0 6px;
		line-height:normal;
		outline:none;
		height:30px;
		padding:6px 0 0 6px;
		overflow:hidden;
	}
	.newList li a:link,.newList li a:visited,.newList li a:hover{color:#000;text-decoration:none;}
	.newList li a.hiLite,.newList li a.newListHover{opacity:0.95;filter:alpha(opacity=95);}
</style>
</head>
<body>
	<form action="#">
		<select class="selectBlock">
			<option>Казань</option>
			<option>Волгоград</option>
			<option>Астрахань</option>
			<option>Ростов</option>
			<option>Армавир</option>
		</select>
	</form>
</body>
</html>

Посмотреть пример | Скачать пример

В общем, подключаем скрипты, проставляем селекту класс selectBlock, прописываем в js обращение к этому классу и всё, селект поменялся на ul li. Теперь с помощью firebag-а смотрим классы у созданного списка и прописываем им соответствующие стили, которые необходимы по дизайну. И стилизованный select готов.

Метки: , ,

Запись опубликована 04.07.2010 в 22:30 и размещена в рубрике css, java script. Вы можете следить за обсуждением этой записи с помощью ленты RSS 2.0. Вы можете перейти в конец и оставить комментарий. Уведомления сейчас отключены.


Fatal error: Call to undefined function wp_related_posts() in /home/k/kazanets/htmlcssinfo/public_html/wp-content/themes/htmlcsstheme/single.php on line 70