Картинка вместо тага select ?

[d_badboy]

Как ще стане това ?

 

[devent]

http://www.htmlforums.com/archive/index.php/t-71725.html

 

[d_badboy]

Не става така :lol:

 

[shterev]

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

 

[d_badboy]

:x това немога да го позиционирам както искам :|
position: absolute; много ми пречи

 

[shterev]

ами защо ти пречи?????? я дай един скреен да видя къде ти излзиа инпута

 

[d_badboy]

Съжалявам че позакъснях малко, но по добре късно отколкото никога
Използвам това http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
Ето css кода:

.red-top { background: url('red/red-top.png') no-repeat; width: 995px; height: 24px; }
.red-center { background: url('red/red-body.png') repeat-y; width: 975px; padding-left: 20px; }
.red-bottom { background: url('red/red-bottom.png') no-repeat; width: 995px; height: 24px; }
.animated { width: 995px; margin: 0 auto; }
.animated form { margin: 0 auto; }
.type1 { width: 378px; border: 1px solid black; }
#info {
	width: 140px;
	height: 33px;
	padding-top: 15px;
	padding-left: 20px;
	float: left;
	text-align: left;
}
.i {
	background: url('red/input.png') no-repeat bottom;
	width: 178px;
	height: 18px;
	padding: 15px 20px;
	float: left;
	color: #aaaaaa;
}
span.select {
	position: absolute;
	width: 188px;
	height: 18px;
	padding: 12px 15px;
	color: #fff;
	border: 1px solid black;
	background: url('red/select.png') no-repeat bottom;
	overflow: hidden;
}

Ето html кода:

<div id="add" class="animated">
		<div class="red-top"></div>
		<div class="red-center">
		<form name="form_add" class="type1" action="" method="get">
			<div id="f-all">Добавяне</div>
			<div id="info"><?php echo $lang_link; ?> *</div>
			<input type="text" class="i" name="link" />
			<div id="info">Категория *</div>
			<select name="cat" onchange="document.getElementById('new_cat').style.display=(this.value=='other')?'block':'none';" class="styled">
				<option value="choose">Избор</option>
				<?php for ($i=0;$i<count($type);$i++) echo "<option value=\"".$type[$i][1]."\">".$type[$i][0]."</option>"; ?>
				<option value="other">Други</option>
			</select>
			<div id="new_cat" style="display: none;">
				<div id="info">Нова категория *</div>
				<input type="text" name="cat" class="i" />
			</div>
			<div style="text-align: center;"><input type="submit" id="b" name="submit" value="Добави" class="b" /></div>
		</form>
		</div>
		<div class="red-bottom"></div>
	</div>

Ето как се вижда с Firefox:

Ето как се вижда с Opera: