How to truncate text in select box using CSS only

Tags: css,drop-down-menu,truncate

Problem :

I have been trying to make this work for sometime but no success for two days now.

I need to truncate/hide the text in a select box in the middle of it using CSS only. The rest of the field (the right side) should remain blank/white and the background image should be last to the right. Problem to the solutions I have tried is that the width of the select box needs to be changed and in this case the width needs to stay unchanged in order to keep the background arrow at it's current location. Something like this:

enter image description here

Maybe someone would have a bright idea (JavaScript is not a possible option):

The HTML here:

<div class="dropdown">
       <option value="">Some Text</option>
       <option value="">Some More Text2</option>
       <option value="">Some More More More Longer Text</option>

And the CSS here:

    border: 1px solid #cfcfcf;
    height: auto;
    border-radius: 5px;
    padding:3px 4px 4px;
    position: relative;
    z-index: 0;

.dropdown select{
    border: none;
    background-color: transparent;
    outline: none;
    padding: 1px 0 0 5px;
    background: url( no-repeat right;
background-position: 55%;

JSFiddle here:

Solution :

Making this happen with a bit of CSS3 is going to be your best bet for now and the future.

Here is a fiddle showing a different technique, still using you're arrow:

/* this places an arbitrary element inside the dropdown but before it's children elements */
/* We use it to cover half the select box as well as display the custom arrow */
.dropdown:before {
    background: url( #fff no-repeat right;

A important but overlooked part is the pointer-events:none; line. It lets the clicks to this "overlay" go through it and to the select.

Here is another decent resource for a no-image approach: You may have to adjust it a bit but you'll get the point

    CSS Howto..

    How to define link text color in UIWebView

    How a css selector is applied when reffering to multiple classes, ids, or elements?

    How do I apply (or edit) a broad set of styles to only one class/ID?

    css: how to access a value that is not used by an element?

    How to get CSS property value from HTML using generalistic JavaScript function
    When you use window.getComputedStyle the method directly return the style attribute calculated of your object. you can access directly the css attribute in the rreturn object. So to solve your...
    Read more

    How to make this Header/Content/Footer/Menu layout using CSS?

    How to enable CDN CSS in Brackets, Chrome?

    How to test a CSS parser?

    How to put text over img on hover - width and height are variable

    How do I get my links to glow on :hover with CSS3? [duplicate]

    How to get rid of spacing between Bootstrap panels?

    How to Apply CSS to Facebook Login Button [closed]

    HTML/CSS - How to get label inside form to animate?

    jQuery how to click a pseudo class element :after [duplicate]

    Yii2 how to include multiple css files from specific view or controller action

    How does 'em' css unit work for positioned elements?

    Content shows up when clicked on the link

    How to pause .setInterval() on hover and on .click() of interior content?

    How to generate width CSS from JavaScript / C#

    How to delete HTML Elements in an iFrame using JavaScript

    How do I keep my links in my table on 1 line?

    How to make the contents of an HTML table fit within their cells?

    How to limit a to only three lines?

    how to specify background text rectangle color in CSS

    How to make div to match image height with CSS

    How to make the slider move right and left alternatively

    How to create gradient background with CSS in Firefox < 3.6?

    CSS: how to add white space before element's content?

    How to positioning an element over another in CSS

    Bootstrap - how to clear css from element to start over?