Rotan075 Rotan075 - 2 months ago 11
CSS Question

Custom select with long select content

Hello I am having a bit of issue regarding my custom select lay-out. I created a custom select that works within all browsers, even IE. But I have a problem with my custom select. First have a look at my HTML code:



.select-style {
padding: 0;
margin: 0;
border: 1px solid #ccc;
width: 120px;
border-radius: 3px;
overflow: hidden;
background-color: #fff;
background: #fff;
position: relative;
}
.select-style:after {
top: 50%;
left: 85%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(0, 0, 0, 0);
border-top-color: #000000;
border-width: 5px;
margin-top: -2px;
z-index: 100;
}
.select-style select {
padding: 5px 8px;
width: 130%;
border: none;
box-shadow: none;
background-color: transparent;
background-image: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.select-style select:focus {
outline: none;
}

<div class="select-style">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value="Volkswagon Polo">Volkswagon Polo</option>
</select>
</div>





The lay-out problem

If you select the "Volkswagon Polo" option you see that the text is behind the black arrow. Which looks not very nice. I tried several options but I could not manage it to make it look nice. I tried to use the
text-overflow
option but without succes. Does anyone knows a nice way to not show the text through the arrow icon, without changing the width of the select?

Answer

I made some improvements. Your arrow want respected by your padding and the select was able get bigger than the wrapper, fixed that with overflow: hidden; width: 100%;:

.select-style {
    padding: 0;
    margin: 0;
    border: 1px solid #ccc;
    width: 130px;
    border-radius: 3px;
    overflow: hidden;
    background-color: #fff;
    background: #fff;
    position: relative;
}

.select-style:after {
    top: 50%;
    right: 10px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(0, 0, 0, 0);
    border-top-color: #000000;
    border-width: 5px;
    margin-top: -2px;
    z-index: 100;
}

.select-style select {
    padding: 5px 28px 5px 8px;
    border: none;
    box-shadow: none;
    background-color: transparent;
    background-image: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    overflow: hidden;
    width: 100%;
}

.select-style select:focus {
    outline: none;
}

* {
    box-sizing: border-box;
}
<div class="select-style">
    <select>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
        <option value="Volkswagon Polo">Volkswagon Polo</option>
    </select>
</div>

JSFiddle

By floating your .select-style and removing your width you can make it adjust automatically to its contents.

Comments