Form element Select option line wrap

Pick your own:

Problem - a select box has to have fixed width by graphic design, but some of options contain long long text and thus bleed out of sight.

<br> nor CSS doesn't work for select option element.

Case:

Solution 1

One solution is to replace the form element select with a drop-down menu built on list elements. Plain html and css would work well.

Solution 2

A pseudo select dropdown built on JavaScript.

Source: http://www.javascriptkit.com/script/script2/dhtmlcombo.shtml

We need some JavaScript, CSS, and an image for dropdown arrows.

Markup

<div id="dhtml_webmaster" class="dhtmlselect" style="z-index: 100;">
Developer Sites
<img class="downimage" title="Select an option" src="downbox.gif" style="left: 145px;"/>
<div class="dropdown" style="top: 20px;">
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.php.net">PHP.net</a>
<a href="http://www.codingforums.com">Coding Forums</a>
<a href="http://www.dynamicdrive.com">Dynamic Drive</a>
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.dynamicdrive.com/style/">CSS Menus/ codes</a>
</div>
</div>
<script type="text/javascript">
//dhtmlselect("id_of_select_menu", "optional_width_of_select_box_px", "optional_width_of_drop_down_menu_px")
dhtmlselect("network", "190px", "90px")
</script>

JavaScript

var combodropimage='downbox.gif' //path to "drop down" image
var combodropoffsetY=2 //offset of drop down menu vertically from default location (in px)
var combozindex=100

if (combodropimage!="")
	combodropimage='<img class="downimage" src="'+combodropimage+'" title="Select an option" />'

function dhtmlselect(selectid, selectwidth, optionwidth){
	var selectbox=document.getElementById(selectid)
	document.write('<div id="dhtml_'+selectid+'" class="dhtmlselect">'+selectbox.title+" "+combodropimage+'<div class="dropdown">')
	for (var i=0; i<selectbox.options.length; i++)
		document.write('<a href="'+selectbox.options[i].value+'">'+selectbox.options[i].text+'</a>')
	document.write('</div></div>')
	selectbox.style.display="none"
	var dhtmlselectbox=document.getElementById("dhtml_"+selectid)
	dhtmlselectbox.style.zIndex=combozindex
	combozindex--
	if (typeof selectwidth!="undefined")
		dhtmlselectbox.style.width=selectwidth
	if (typeof optionwidth!="undefined")
		dhtmlselectbox.getElementsByTagName("div")[0].style.width=optionwidth
	dhtmlselectbox.getElementsByTagName("div")[0].style.top=dhtmlselectbox.offsetHeight-combodropoffsetY+"px"
	if (combodropimage!="")
		dhtmlselectbox.getElementsByTagName("img")[0].style.left=dhtmlselectbox.offsetWidth+3+"px"
	dhtmlselectbox.onmouseover=function(){
		this.getElementsByTagName("div")[0].style.display="block"
	}
	dhtmlselectbox.onmouseout=function(){
		this.getElementsByTagName("div")[0].style.display="none"
	}
}

CSS

.dhtmlselect{
	width: 140px;
	border: 1px solid black;
	position: relative;
	text-indent: 3px;
	padding: 1px 0;
	cursor: hand;
	cursor: pointer;
	background-color: #F0F0F0;
}
.dhtmlselect .downimage{
	position: absolute;
	right: -25px;
}
.dhtmlselect .dropdown{
	position: absolute;
	left: 0;
	width: 180px;
	border: 1px solid black;
	border-bottom-width: 0;
	display: none;
	z-index: 5;
	font-weight: normal;
}
.dhtmlselect .dropdown a{
	width: auto;
	display: block;
	background: #fff7d1;
	border-bottom: 1px solid black;
	padding: 1px 0;
	text-indent: 5px;
	text-decoration: none;
	color: black;
}
* html .dhtmlselect .dropdown a{
	width: 100%;
}
.dhtmlselect .dropdown a:hover{
	background: #ffe469;
}

Pick your own:

2009

Web Development - XHTML CSS JavaScript jQuery.