1

I'm trying to stylize option tags in this select box, but when I click on it option tags are wider than the select box, but they should be equal. Is it possible to make it happen via css?

Here's the current progress: http://codepen.io/anon/pen/aBrzqz

.search {
  border: 1px solid #ccc;
  width: 250px;
  overflow: hidden;
  background: #fafafa url("http://www.honigwine.com/assets/images/global/tabs/arrow-down.png") no-repeat 90% 50%;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  float: left;
}
.search select {
  padding: 10px 18px;
  height: 55px;
  width: 110%;
  border: none;
  box-shadow: none;
  background: transparent;
  cursor: pointer;
}
.search select .option {
  padding: 10px 18px;
  width: 250px;
}
<div class="search">
  <select>
    <option value="" class="option">Choose something</option>
    <option value="">One</option>
    <option value="">Two</option>
    <option value="">Three</option>
  </select>
</div>
kukkuz
  • 41,512
  • 6
  • 59
  • 95
Smithy
  • 807
  • 5
  • 17
  • 43
  • 1
    Historically I believe it's been very tricky to style the `Option` HTML tag but CSS3 can do this, in moderation, in *most* browsers. There are also various Javascript plugins that do a good job of total input overhaul styling. Both of these are around on other questions on this topic. – Martin Dec 23 '16 at 15:17
  • That's a dupe for sure. – Knu Dec 23 '16 at 15:20
  • 1
    Possible duplicate of [How to style the option of a html "select"?](http://stackoverflow.com/questions/7208786/how-to-style-the-option-of-a-html-select) – TylerH Dec 23 '16 at 15:38

3 Answers3

2

The last style in css hides the default dropdown aroow and shows only the custom one.

.search {
  border: 1px solid #ccc;
  width: 250px;
  overflow: hidden;
  background: #fafafa url("http://www.honigwine.com/assets/images/global/tabs/arrow-down.png") no-repeat 90% 50%;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  float: left;
}
.search select {
  padding: 10px 0px;
  height: 55px;
  width: 100%;
  border: none;
  box-shadow: none;
  background: transparent;
  cursor: pointer;
}
.search select .option {
  padding: 10px 0px;
  width:100%;
} 
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
<div class="search">
  <select>
    <option value="" class="option">Choose something</option>
    <option value="">One</option>
    <option value="">Two</option>
    <option value="">Three</option>
  </select>
</div>
ab29007
  • 7,611
  • 2
  • 17
  • 43
  • thank you, but this unfortunately also causes the default arrow to appear, but I wish to keep the custom one. – Smithy Dec 23 '16 at 15:27
  • I took care of that and edited answer as soon as I posted it, can you please accept it now, thank you – ab29007 Dec 23 '16 at 15:28
  • that's it! I didn't know about this appearance attribute...thank you!! – Smithy Dec 23 '16 at 15:37
0

What you could also do is working with a pseudo element which contains your desired background image.

.search {
  position: relative;
  border: 1px solid #ccc;
  width: 250px;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  float: left;
}
.search:after {
  content: '';
  position: absolute;
  top: 0;
  left: 100%;
  width: 10%;
  height: 100%;
  background: #fafafa url("http://www.honigwine.com/assets/images/global/tabs/arrow-down.png") no-repeat 90% 50%;
}
.search select {
  padding: 10px 18px;
  height: 55px;
  width: 110%;
  border: none;
  box-shadow: none;
  background: transparent;
  cursor: pointer;
}
.search select .option {
  padding: 10px 18px;
  width: 250px;
}
<div class="search">
  <select>
    <option value="" class="option">Choose something</option>
    <option value="">One</option>
    <option value="">Two</option>
    <option value="">Three</option>
  </select>
</div>
SvenL
  • 1,904
  • 8
  • 10
0

Well there is one option of setting appearance to none in select, another you can set you background position and hide that select arrow by img at top as below,

.search {
    border: 1px solid #ccc;
    width: 250px;
    overflow: hidden;
    background: #fafafa url("http://www.honigwine.com/assets/images/global/tabs/arrow-down.png") no-repeat 100.4% 48%;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    float: left;
}

.search select {
    padding: 10px 18px;
    height: 55px;
    width: 100%;
    border: none;
    box-shadow: none;
    background: transparent;
    cursor: pointer;
}

.search > select > .option {
    padding: 10px 18px;
        width: 250px;
}
<div class="search">
  <select>
       <option value="" class="option">Choose something</option>
       <option value="">One</option>
       <option value="">Two</option>
       <option value="">Three</option>
     </select>
</div>
frnt
  • 8,455
  • 2
  • 22
  • 25