Different colors for items in select dropdown list?

[we5inelgr]

Hi forum,

Is there a way to do either:

1. Have different font colors for the text of the words for each item in a dropdown list?
   or
2. Have different color backgrounds, for each item in a dropdown list?

Thanks.

[jo-r]

Create classes for them in your CSS

[we5inelgr]

Thanks for the reply.

I can see how that could be done to the entire dropdown, “form-select,” because it can be given an ID…but how does each individual item within that dropdown get assigned an ID? I don’t see that option (to assign an ID to each dropdown item).

[richards]

You won’t be able to style them as they will be part of the browser interface. However you can create a faux select using some css and js.

<div class="container">
  <div class="row">
    <div class="col-5">
  <div class="faux-select w-100">
  <div class="faux-select-label">Select an option</div>
  <div class="faux-select-items hidden">
    <div class="text-success faux-select-item">Positive</div>
    <div class="text-danger faux-select-item">Negative</div>
    <div class="text-warning faux-select-item">Follow Up</div>
  </div>
</div>
<input type="text" id="faux-select-value" name="faux-select-value" placeholder="input to record result .. change type to hidden">
    </div>
  </div>
</div>

CSS:

.faux-select {
  position: relative;
  display: inline-block;
}

.faux-select-label {
  padding:  1em;
  border:  1px solid black;
  border-radius:  10px;
  cursor: pointer;
  user-select: none;
}

.faux-select-items {
  position: absolute;
  border:  1px solid grey;
  border-radius:  5px;
  background-color: white;
  width:  100%;
  z-index:  1;
}

.faux-select-item {
  padding:  1em;
  cursor: pointer;
}

.faux-select-item:hover {
  background-color: #eee;
}

.hidden {
  display: none;
}

JS:

document.querySelector('.faux-select-label').addEventListener('click', function() {
  var items = document.querySelector('.faux-select-items');
  items.classList.toggle('hidden');
});

var items = document.querySelectorAll('.faux-select-item');
items.forEach(function(item) {
  item.addEventListener('click', function() {
    var label = document.querySelector('.faux-select-label');
    label.textContent = this.textContent;
    items.forEach(function(item) {
      item.classList.remove('selected');
    });
    this.classList.add('selected');
    document.querySelector ('.faux-select-items').classList.add('hidden');
    
    // Set the value of the hidden input field
    document.getElementById('faux-select-value').value = this.textContent;
  });
});

Example on codepen:

[kuligaposten]

You can try this

option:nth-of-type(1) {
  color: white;
  background-color: var(--bs-green);
}

option:nth-of-type(2) {
  background-color: red;
  color: white;
}

option:nth-of-type(3) {
  background-color: #efea5f;
  color: black;
}

[we5inelgr]

Thanks for the reply and code example. I appreciate it!
Seems like with this, quite a bit of customization can be done.

[we5inelgr]

This seems like the direction I’d like to go as I generally like to keep things as simple as possible…meaning less code, and in this particular case, using only styling if possible.

That, and there are several select dropdown boxes I’m working with, but only want this different color text option on this one particular select object.

However, I’m not able to get “option” to work.

For testing purposes, I’ve named the “form-select” class as ID=“testing-select”

and then put this one line in my css to see what would happen:

of course, it doesn’t work…resulting in the select dropdown list disappearing from the page as well due to the error here.

what am I missing?

[richards]

What you have is scss if you want just css:

#testing_select option:nth-of-type(1) {
  color: white;
  background-color: var(--bs-green);
}

As I stated before this will not work on all operating systems

[kuligaposten]

You can make your own dropdown menu on the input field like this

html

<div class="container">
	<div class="row">
		<div class="col-4">
			<div class="d-flex flex-column btn-group">
			<label class="form-label" for="test">Test</label>
			<input type="text" 
				id="test" 
				data-bs-toggle="dropdown"
				data-bs-display="static"
				placeholder="make your choice"
				name="test" readonly>
				<div class="dropdown-menu dropdown-menu-start w-100">
				  <ul class="list-unstyled">
					<li class="bg-success" data-positive>Positive</li>
					<li class="bg-danger" data-negative>Negative</li>
					<li class="bg-warning" data-followup>Follow Up</li>
				  </ul>
				</div>
			</div>
		</div>
	</div>
</div>

CSS

#test {
  cursor: pointer;
}

javascript

const test = document.querySelector('#test')
const positive = document.querySelector('[data-positive]')
const negative = document.querySelector('[data-negative]')
const followup = document.querySelector('[data-followup]')

positive?.addEventListener('click',() => test.value = positive.textContent)
negative?.addEventListener('click',() => test.value = negative.textContent)
followup?.addEventListener('click',() => test.value = followup.textContent)

[kuligaposten]

here is an example

Today's tip

[we5inelgr]

Thanks to the both of you for your suggestions and information.

It’s almost there.

I’m hoping to keep the BSS Input-Group-Span-Select styling as that matches the other 20+ form inputs on the page.

The css at this point:

The particular dropdown in question at page load:

The options:

With a selection made:

The item’s background color isn’t preserved when it’s selected.

I’m guessing this can’t be handled by CSS alone and will take JS to detect what was selected and re-assign the appropriate background color? But how to accomplish that if each of the options within the Select cannot be assigned an ID?

b.t.w. This page will not be for public consumption and will only be used by a handful of people (at most), so browser compatibility isn’t a top concern in this particular case (but no doubt helpful information for anyone else who might see this and use the advice given here)

[kuligaposten]

You can check the select’s value and change the background color with javascript
like this

CSS

:root {
  --test-background: #ffffff;
}

#testing_select option:nth-of-type(2) {
  background-color: var(--bs-success-bg-subtle);
}

#testing_select option:nth-of-type(3) {
  background-color: var(--bs-danger-bg-subtle);
}

#testing_select option:nth-of-type(4) {
  background-color: var(--bs-warning-bg-subtle);
}

#testing_select.form-select {
  background-color: var(--test-background);
}

javascript

const cssVar = (name, value) => {
  if (name.substring(0, 2) !== '--') name = '--' + name;
  if (value) document.documentElement.style.setProperty(name, value);
  return getComputedStyle(document.documentElement).getPropertyValue(name);
};

const selectElement = document.getElementById('testing_select');
selectElement.addEventListener('change', function () {
  if (this.value === '') cssVar('--test-background', 'white');

  if (this.value === 'positive')
    cssVar('--test-background', 'var(--bs-success-bg-subtle)');

  if (this.value === 'negative')
    cssVar('--test-background', 'var(--bs-danger-bg-subtle)');

  if (this.value === 'followup')
    cssVar('--test-background', 'var(--bs-warning-bg-subtle)');
});

[we5inelgr]

Perfect! That did it.

Many thanks for your guidance and help!