CODEWITHSUNDEEP
htmlcss
Smithy
Smithy

Reputation: 847

How to style the "option" value in select dropdown?

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>

Upvotes: 1

Views: 3621

Answers (3)

frnt
frnt

Reputation: 8795

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>

Upvotes: 0

SvenL
SvenL

Reputation: 1954

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>

Upvotes: 0

ab29007
ab29007

Reputation: 7766

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>

Upvotes: 2

Related Questions