CODEWITHSUNDEEP
twitter-bootstrapbootstrap-4
Yunti
Yunti

Reputation: 7458

bootstrap (4) How to amend custom select arrow to change colour

I'm trying to amend the arrow used in Boostraps custom-select css class. Currently it's black and would prefer to change this to grey, is there an easy way to do this? https://getbootstrap.com/docs/4.0/components/forms/#select-menu

Upvotes: 2

Views: 17868

Answers (2)

j08691
j08691

Reputation: 207953

The arrows are SVG being used as the background image. You just need to override it with your own CSS by specifying the fill color (the important part below being what you enter in fill='something').

For example:

.custom-select {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='red' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E")
}

Example

Upvotes: 13

memo
memo

Reputation: 345

to change black to white use as below and change background color #272a3d as your needs

.custom-select {
  background: #272a3d url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='white' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px !important;
}

Upvotes: 2

Related Questions