I use pure CSS for the <select> drop-down style. Using the code below, I can do this with one hiccup: when the text in the option becomes too wide, it is not cropped in front of the background image of the down arrow.
When the text is too long:
What I would like to accomplish is to cut off the text in front of the down arrow image so that they do not overlap. However, I would still like the full text to appear when expanding the drop-down list:
Here is the code:
<!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>Styling Selects</title>
<style type="text/css">
.selectDiv select {
background: transparent;
width: 250px;
padding: 7px;
font-size: 16px;
border: none;
height: 34px;
text-transform: lowercase;
color: #666666;
z-index: 100;
position: absolute;
left: 0px;
top: 0px;
}
.selectDiv {
border: 2px solid #666666;
display: block;
width: 218px;
height: 34px;
overflow: hidden;
position:relative;
display: inline-block;
}
.selectButtonDiv {
width: 16px;
height: 16px;
z-index: 99;
position: absolute;
left: 190px;
top: 9px;
display: inline-block;
background: url("stream_7B0046.png") no-repeat -96px #FFF;
}
</style>
</head>
<body>
<div class="selectDiv">
<div class="selectButtonDiv"></div>
<select>
<option value="Option 1">Option 1</option>
<option value="Option With Really Long Name">Option With Really Long Name</option>
</select>
</div>
</body>
</html>
Any ideas on how I could crop the text when displaying a minimized dropdown, but still show the full text when expanding. All this while remaining pure in CSS. Thank!
source
share