Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.05.2011, 10:44
Интересующийся
Отправить личное сообщение для aleks7890 Посмотреть профиль Найти все сообщения от aleks7890
 
Регистрация: 11.05.2011
Сообщений: 9

Как сделать разную ширину у этих двух селектов?
<!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>
<script type="text/javascript">$(document).ready(function(){$('.selectBlock1').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>
		<form action="#">
		<select class="selectBlock1">
			<option>Казань</option>
			<option>Волгоград</option>
			<option>Астрахань</option>
			<option>Ростов</option>
			<option>Армавир</option>
		</select>
	</form>
</body>
</html>

Как сделать разную ширину у этих двух селектов?
Ответить с цитированием
  #2 (permalink)  
Старый 11.05.2011, 10:48
Аватар для Skipp
.
Отправить личное сообщение для Skipp Посмотреть профиль Найти все сообщения от Skipp
 
Регистрация: 30.03.2010
Сообщений: 1,813

<!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>
<style type="text/css">
	body{
		padding:100px;
		margin:0;
		background:#CCC;
		color:#000;
	}
	.newListSelected{
		width:360px;
		margin:0 auto;
	}
.selectBlock{
width: 50px;
}
.selectBlock1{
width: 100px;
}
	.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>
		<form action="#">
		<select class="selectBlock1">
			<option>Казань</option>
			<option>Волгоград</option>
			<option>Астрахань</option>
			<option>Ростов</option>
			<option>Армавир</option>
		</select>
	</form>
</body>
</html>


а если надо с помощью jquery то
$(function(){
$(".selectBlock").css({width: "50px"});
$(".selectBlock1").css({width: "100px"});
})
__________________
.

Последний раз редактировалось Skipp, 11.05.2011 в 10:51.
Ответить с цитированием
  #3 (permalink)  
Старый 11.05.2011, 10:51
Аватар для poorking
prodigy
Отправить личное сообщение для poorking Посмотреть профиль Найти все сообщения от poorking
 
Регистрация: 01.11.2010
Сообщений: 503

<style type = "text/css">
.txt{
  border:1px solid red;
}
.txt.w100{
 width: 100px;
}
.txt.w200{
 width: 200px;
}
</style>
<input type = "text" class = "txt w100" /> <input type = "text" class = "txt w200"/>

все общее в один класс, все отличающееся в разные

UPD
Skipp прошу прощения, не обновил
__________________
readOnly
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как лучше сделать виджет? comentator Элементы интерфейса 0 25.03.2011 08:44
Как определить ширину вертик. скроллбара и его присутствие? javascripter Элементы интерфейса 3 26.02.2011 14:57
Как сделать, чтобы при наведении на кнопку справа от нее появлялись текстовые ссылки? Tass Общие вопросы Javascript 7 17.02.2011 09:06
Как сделать постоянную проверку на javascript alb Общие вопросы Javascript 18 09.01.2010 14:05
Как сделать такую галерею crisco Events/DOM/Window 4 23.12.2008 16:28