Home/ Questions/Q 8010211
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T18:40:12+00:00

I am using pure CSS to style a < select > drop down box.

  • 0

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.

Normal View

When the text is too long:

Text 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:

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0