Select menu placeholder empty value grey text

Question

I'm using this design:

AdminBSB Material Design

The design is using bootstrap-select. As you can see in the middle of the page, the -- Please select -- option is an empty value, but the text is black, instead of grey. When using a select menu in a form, all placeholders for all other form elements are grey, instead for the select menu.

I have already checked out all answers given here:

How do I make a placeholder for a 'select' box?

But none of them work for this design. Link for the bootstrap-select css:

AdminBSB Bootstrap Select CSS

Does anyone know a solution to show a grey text for empty select menu values? On the bootstrap-select examples page it's working as intended.

Bootstrap Select Example Page

Answer 1

I just tested this section on :
https://gurayyarar.github.io/AdminBSBMaterialDesign/pages/ui/list-group.html

With CONTEXTUAL CLASSES WITH LINKED ITEMS, and other selectbox.

As I see the example are selected, but the color difference between a selected object and a hover object is so small that you can think it is not selected with a high britness screen.

You can change the hover selection with, for example CONTEXTUAL CLASSES WITH LINKED ITEMS, list-group cyan color, by changing the opacity to 0.8 to 0.1:

it is only for cyan color this example:

.list-group .list-group-bg-cyan:focus{
   opacity: 0.1;
}

Hope it helps,

if it is another component please provide an example, or link