Custom select with long select content

Question

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?

If you manage to make it look the same and it works also in all the other browser, especially in IE, then I am fine by removing the after select property. @Manoj — Rotan075, Sep 06 '16 at 08:50
Hope this will serve your purpose http://stackoverflow.com/questions/16603979/select-removing-dropdown-arrow — Manoj, Sep 06 '16 at 08:52

score 1 · Answer 1 · answered Sep 06 '16 at 08:46

Try this:

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

It's because you set .select-style width to fixed value. display: inline-block; prevent element from expanding to full width, padding set some space near arrow. And now it looks nice :).

I also noticed, taht when I removed width from .select-style select and add text-align:center it looks even beter :).

score 1 · Accepted Answer · answered Sep 06 '16 at 08:53

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.

Yep, that is what I am looking for. Perfect solution. Thank you! :) — Rotan075, Sep 06 '16 at 08:57
But it might not work for IE 10 " -webkit-appearance: none; -moz-appearance: none;" — Manoj, Sep 06 '16 at 09:02
@Manoj [`appearance`](http://caniuse.com/#search=appearance) has some weird support behavior. Thanks for noting! Might look like a default select bordered and a arrow on top. Should be functional in any case though. — AlexG, Sep 06 '16 at 09:28

score 0 · Answer 3 · answered Sep 06 '16 at 08:59

0

If you dont want to change the width you can use

    .select-style select {
    /*for firefox*/
    -moz-appearance: none;
    /*for chrome*/
    -webkit-appearance:none;
  }

  /*for IE10*/
 .select-style select::-ms-expand {
   display: none;
 }

This will remove drop down arrow

answered Sep 06 '16 at 08:59

Manoj

327
1
11

yes! I am aware of that but what I wanted is to have an custom arrow. Anyways thanks for your answer,. – Rotan075 Sep 06 '16 at 09:03
custom arrow will be there before you select, it will dis appear once you select from drop down – Manoj Sep 06 '16 at 09:07

Custom select with long select content

3 Answers3