Problem - a select box had got fixed width by 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.
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.
If by some reasons a select dropdown must be used, JavaScript can help to style the select element as needed.
Source: http://www.javascriptkit.com/script/script2/dhtmlcombo.shtml
We need some JavaScript, CSS, and an image for dropdown arrows.
<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>
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"
}
}
.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;
}