CODEWITHSUNDEEP
cssformsdropdown
John
John

Reputation: 10146

Can you change background color on select drop down arrow?

When using a select on a form, is there a way to change the background color where the arrow is on the right hand side? Also can I change the color of the arrow itself as well? Im using the latest stable version of bootstrap, dont know if they have anything built in or if there is CSS that can do this. I attached an image of what it looks like now and what Im trying to change it to

enter image description here

Upvotes: 1

Views: 3513

Answers (2)

Andrei Fedorov
Andrei Fedorov

Reputation: 3977

You need to block a normal arrow of its custom. Сolors for your choice ))

know problem: when you click on the arrow to the custom menu does not appear. I'll need a little js

.select-style {
  padding: 0;
  margin: 0;
  border: 1px solid #ccc;
  width: 120px;
  border-radius: 3px;
  overflow: hidden;
  background-color: #fff;
  background: #fff url("http://www.scottgood.com/jsg/blog.nsf/images/arrowdown.gif") no-repeat 90% 50%;
}

.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;
}

.select-style {
  position: relative;
}

.arrow {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 100;
  background-color: red;
  color: blue;
  line-height: 2;
}

.select-style:hover .arrow {
  color: lightblue;
}
<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>
  </select>
  <div class="arrow">&#9660;</div>
</div>

Upvotes: 2

John
John

Reputation: 10146

I found the solution on this page: https://codepen.io/bephf/pen/ogNBYW

<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>
  </select>
</div>

Then for the CSS styles:

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

    background: #fff url("path to arrow image") no-repeat 90% 50%;
}

.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;
}

Upvotes: 0

Related Questions