How can I get a Select elements Options to “right-width” but leave the width of the Select itself unchanged?


Tags: css,html-select

Problem :

This CSS can be used to alter the width of a Select when it is in use:

select:focus {width:300px;}

...but I want just the Options (the drop down bit) to increase in width, not the Select element itself (as it appears prior to dropping down the options).

IOW, considering a Select Option of "Fiver was a Rabbit, but unlike Peter and Roger" as an option in the Select, rather than being displayed like this when dropped down:

| Select  Element when "at rest" |
Fiver was a Rabbit, but unlike Pe

(Option truncated)

...or this:

| Select  Element when "at rest"              |
Fiver was a Rabbit, but unlike Peter and Roger|

(Select Element taking up too much real estate and elbowing elements to its right out of the way)

...I want it to be like this:

| Select  Element when "at rest" |
Fiver was a Rabbit, but unlike Peter and Roger|

(Select remains the same width, but the Options "right-width" to be just wide enough to show all the text, but no wider).

Is this possible? If so, how?



Solution :

What about a custom styled wrapper?

HTML:

<div class="select-wrapper">
    <select>
        <option value="" disabled selected>Select your option</option>
        <option>First option</option>
        <option>Second really really really long option</option>
    </select>
</div>

SCSS:

.select-wrapper {
    position: relative;
    width: 200px;
    overflow: hidden;
    border: 1px solid #ccc;

    &::after {
        content: "\2193";
        position: absolute;
        right: 5px;
        top: 0;
    }

    select {
        background: transparent;
        border: 0;
        padding: 3px;
    }
}

See this jsfiddle for an example. It's not pretty, but you can get the idea.


Update: Based on B. Clay Shannon's comment, see this updated jsfiddle, without the surrounding div.


    CSS Howto..

    How to fix parent hover issues with CSS?

    css + thymeleaf - How to auto-adjust displayed screen size?

    How can I fix an element to the page that is of a variable distance from the edge of the screen?

    How to include a non-standard font-face in azure?

    How to implement a finished coded html/css page into CMS [closed]

    How to scale a div without scaling content

    How to Make CSS Work on 404 Error Page?

    how to make div fixed and ot move upon window resize

    How do I set two values for IE's `filter` property?

    how to vertical align a table inside a div

    How to make sure that two divs appear side by side? [closed]

    How can I make buttons flash different background colors when clicked/

    How can I have a div/span “fill in” the remaining width/height of the page, and stay fixed in position?

    jQuery, how can i do to toggle a margin

    How do I get these boxes to align in either jquery or css

    How do I hide the li's that don't fit on a single line?

    How can I force CQ5.5 to ignore CSS data-uri-schemes?

    How to add image and change visibility on hover CSS

    CSS: How to refer to a tag

    How to indent multiple levels of select optgroup with CSS?

    How to use a different font CSS color for all Internet Explorer browser versions?

    How Do I Wrap Text So My Accordions Image Does Go OutSide My aAccordion

    How to change the background color of a line of user input in a textarea?

    CSS InfoBox over all elements how to place? [closed]

    How to embed a php/javascript photogallery in a page of an html/css website?

    How to CSS style a table such that cells is at most 30% of screen height and use a scroll bar when it's taller?

    How to close the menu after click third layer menu item

    Show text at bottom with css

    How to properly fix CSS inconsistencies across desktop and mobile browsers?

    How to remove
      unordered list's last
    • list item's border using css without changing anything in HTML code?