I want to change the background color of the select box

Question

I want to change the background color of a select box. The color is #F1C26A for the background of the selector. i tried changing the color and the background for this. But don't change. Any idea? Thanks for the help

select.form-control:not([size]):not([multiple]) {
  height: calc(2.25rem + 2px); }

select.form-control:focus::-ms-value {
  color: #F1C26A;
  background-color: #fff; }

<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="col-6">
      <select id="Pizzas" name="Pizzas" class="form-control">
        <option value="1" >Option 1</option>
        <option value="2" >Option 2</option>
      </select>
    </div>
  </body>
</html>

Possible duplicate of [Change select box option background color](https://stackoverflow.com/questions/12836227/change-select-box-option-background-color) — frobinsonj, Jun 07 '19 at 10:43

score 0 · Answer 1 · answered Jun 07 '19 at 10:51

0

Set the background-color on the select itself, like so select { background-color: #F1C26A; }

answered Jun 07 '19 at 10:51

ScottieG

318
2
16

score 0 · Accepted Answer · edited Jun 07 '19 at 11:14

0

Just remove -ms-value as it is not supported by most browsers only edge and IE.

select.form-control:not([size]):not([multiple]) {
  height: calc(2.25rem + 2px); }

select.form-control:focus {
  color: #F1C26A;
  background-color: #fff; }

<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="col-6">
<select id="Pizzas" name="Pizzas" class="form-control"  >
<option value="1" >Option 1</option>
<option value="2" >Option 2</option>
</select>
</div>
</body>
</html>

edited Jun 07 '19 at 11:14

ScottieG

318
2
16

answered Jun 07 '19 at 11:00

Shaurya Vardhan Singh

664
7
20

Thanks, but doesn't work in select item with php query, Any idea why? – Fid Jun 07 '19 at 15:57
@Fidel I am not quite getting what you are trying to say but still provide your PHP query so that I can have a look. – Shaurya Vardhan Singh Jun 07 '19 at 21:09

score 0 · Answer 3 · answered Jun 07 '19 at 11:02

0

If you want to change the background option not only select, I recommend using, for example, select2 select2.org.

Background definitely browser, using select2, you can simply change styles. Of course, there are more variations of change select

answered Jun 07 '19 at 11:02

Jogi

98
2
8

I want to change the background color of the select box

3 Answers3