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">
    <select>
       <option value="">Some Text</option>
       <option value="">Some More Text2</option>
       <option value="">Some More More More Longer Text</option>
    </select>                                
</div>

And the CSS here:

.dropdown{
    width:150px;
    border: 1px solid #cfcfcf;
    height: auto;
    border-radius: 5px;
    padding:3px 4px 4px;
    position: relative;
    z-index: 0;
    overflow:hidden;
    }

.dropdown select{
    border: none;
    background-color: transparent;
    outline: none;
    padding: 1px 0 0 5px;
    width:165%;
    background: url(http://i57.tinypic.com/nnmgpy_th.png) no-repeat right;
background-position: 55%;
    }

JSFiddle here: http://jsfiddle.net/pazzesco/r6c9zcpc/7/



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:

http://jsfiddle.net/plastclens/16Ljd8s8/2/

/* 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 {
    height:29px;
    width:75px;
    display:block;
    content:'';
    position:absolute;
    top:0;
    right:3px;
    background: url(http://i57.tinypic.com/nnmgpy_th.png) #fff no-repeat right;
     pointer-events:none;
}

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: http://cssdeck.com/labs/styling-select-box-with-css3 You may have to adjust it a bit but you'll get the point


    CSS Howto..

    How do I add inline css to dropdown in Yii?

    How to store “state” in CSS only?

    Autohide Scrollbars - Show only when necessary

    How to apply remaining width to a div in the middle of 2 other divs

    How to add custom CSS/JS to Grails 2.4.x layouts/templates?

    how can i use css selector to give style only to a first div between two divs of the same kind?

    How do I apply odd/even styles to elements while taking into account excluded classes? [duplicate]

    How does css scale transform affect document flow?

    CSS Divs overlapping, how do I force one above the other?

    How to edit mobile CSS in SocialEngine?

    Vim: How would I recursively run “:sort” for everything between curly braces?

    Webpack bundle does not show css

    Fancyselect: How to force to open the selector at the bottom?

    How does wikimedia code there input onfocus

    How to close popup

    How can I make the left div expand and the right div have constant width?

    How to change css content hover effect background color css php in this situation?

    How to capture a CSS multiline comment block with JavaScript regex

    How does Apple position its slideshow inside a fixed-position box?

    How do I animate my CSS progress bar?

    How to make content shareable from a static website

    How do I make the box smaller in html?

    How to link a main.css to all Django templates? [closed]

    How to change background on hover for 2 elements using css

    Bootstrap with Picture Slideshow

    How can I write CSS with jQuery (or JS) to apply to current and future matches?

    Flexbox in Chrome--How to limit size of nested elements? [duplicate]

    Hover over image making it transparent and showing text

    How to make this css code (counters and ;before) cross browser compatible using jquery?

    How to use “css” in the “jsp” in Spring MVC project?