Menu
I am using pure CSS to style a < select > drop down box. Using the code below, I am able to do this with one hiccup: when the text on the option becomes too wide, it doesn't cut off before the background image of the drop down arrow.
When the text is too long:
What I would like to accomplish is to have the text cut off before the drop down arrow image so that they do not overlap. However, I would still like the full text to display when the drop down list is expanded:
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 trim off the text when displaying the collapsed drop down box but still show the full text when expanded. All this while remaining purely in CSS. Thanks!
973
Put the select in an inner div, and use padding-right on your existing selectDiv or margin-right on that inner div.
20
My first suggestion would be to make the select wide enough to account for your largest character count. I'm sure you thought of that and it's not available.
My second recommendation is adding Javascript, particularly jQuery DD, to replace the select options with definition lists that can be more easily styled. https://github.com/HenrikJoreteg/jquery.dd
144
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
