How it is possible to create a individual Dropdown Layout.

HTML/JS Sourcecode:

<style type="text/css">
div.individualDropdown {
	border:1px solid #ccc;
	width:180px;
	height:18px;
	overflow:visible;
	background-color:#fff;
	line-height:17px;
	float:left;
	background-image:url(templates/cmsinstances/waglechnercom/wwtechchannel/dropdown_icon.png);
	background-repeat:no-repeat;
	background-position:top right;
}

div.individualDropdown span {
	font-size:14px;
	font-family:arial,verdana;
	color:#444;
}

div.individualDropdown select {
	width:180px;
	position:relative;
	left:0px;
	top:-20px;
	opacity:0;
	filter:alpha(opacity=0);
	-moz-opacity:0;
	-khtml-opacity:0;
}
</style>

<div class="individualDropdown">
	<span id="dropdown1txt" >Dropdown</span>
	<select id="dropdown1select" name="dropdown1">
		<option value="0">Dropdown</option>
		<option value="1">Wert1</option>
		<option value="2">Wert2</option>
	</select>
</div>

<script language='JavaScript' type='text/javascript' />

$("#dropdown1select").change(
	function() {
		$("#dropdown1txt").html($("#dropdown1select option:selected").text());
	}
);

</script>



Example:
Dropdown










Bernhard Waglechner | Impressum | office@waglechner.com