CODEWITHSUNDEEP
htmlcss
Vaibhav Jain
Vaibhav Jain

Reputation: 3753

Drop-Down Background in CSS

I want to change the drop-down part of the drop-down menu same as the background color of the option part.

enter image description here

Added Snippet.

.selectdropdown{
 background: none repeat scroll 0 0 lightgreen;
    border: 1px solid rgba(0, 0, 0, 0.17);
    border-radius: 2px;
    box-shadow: 0 -2px rgba(0, 0, 0, 0.03) inset;
    color: #000000;
    cursor: pointer;
    display: inline-block;
    font-size: 12px;
    font-weight: normal;
    height: 30px;
    line-height: 28px;
    padding: 0 10px;
    position: relative;
    vertical-align: middle;
    white-space: nowrap;
	}
<select class="selectdropdown" name="Status">	
<option value="Open">Open</option>
<option value="Close">Close</option>
<option value="Resolved">Resolved</option>
<option value="On Hold">On Hold</option>
</select>

Upvotes: 1

Views: 77

Answers (2)

giorgio
giorgio

Reputation: 10202

Short answer: nope...

Long answer: depends on the browser and os you are using. Form controls (checkboxes, selects, etc.) can be partially styled, and in most cases stuff like the carrot cannot. It can be quite frustrating, but it is what it is.

There are a few workarounds though. First of all you can use bootstrap. They've done a pretty good job in styling form controls as flexible as possible and as cross-browser-proof as possible. However, it'll still look a bit different on different browsers and even on different os'es.

If that's not enough for you, you can use some javascript plugin which will produce (most of the times) an <ul> or any other container which will serve as a dropdown. In example bootstrap has done it, but you'll need a few lines of JS to get it to work as a select box. But our friend google has tons of alternatives for the taking.

Upvotes: 2

Alex Char
Alex Char

Reputation: 33218

I assume you refer only on firefox cause in chorme looks ok. I suggest to hide default arrow and create a custom one:

.selectdropdown {
  background: none repeat scroll 0 0 lightgreen;
  border: 1px solid rgba(0, 0, 0, 0.17);
  border-radius: 2px;
  box-shadow: 0 -2px rgba(0, 0, 0, 0.03) inset;
  color: #000000;
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  font-weight: normal;
  height: 30px;
  line-height: 28px;
  padding: 0 10px;
  position: relative;
  vertical-align: middle;
  white-space: nowrap;
  appearance: none;
  -moz-appearance: none;
  /* Firefox */
  -webkit-appearance: none;
  /* Safari and Chrome */
}
.styled-select:after {
  content: "";
  width: 0px;
  height: 0px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid rgb(0, 0, 0);
  position: absolute;
  left: 64px;
  top: 21px;
}
<div class="styled-select">
  <select class="selectdropdown" name="Status">
    <option value="Open">Open</option>
    <option value="Close">Close</option>
    <option value="Resolved">Resolved</option>
    <option value="On Hold">On Hold</option>
  </select>
</div>

Upvotes: 2

Related Questions