Change font color for select option placeholder without required

Question

I am trying to change the color of a select place holder. This can be done if the element is set to required and this CSS is used:

select:required:invalid {
    color: red;
}

Edit: here is an example of the select:

<select required>
    <option value="Placeholder" selected disabled hidden>Placeholder</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

However I can't find a working solution to this if it's not set to required.

This guy has the same question as me in 2017 but none of the answers worked in Safari or Mobile Safari, hence why this is not a duplicate.

Is this possible without using JavaScript?

Answer 1

You mean like this??

.myselect {
    color:red;
    height:30px;
    border-radius:10px;
    padding:5px;
    border-color:red;
    
    }
 
.black {    
    color:black;
    height:30px;
    border-radius:10px;
    padding:5px;
    border-color:black;
}
 

<select class="myselect" onchange="this.className=this.options[this.selectedIndex].className"
    class="myselect">
    <option class="black" value="Placeholder" selected disabled hidden>Placeholder</option>
    <option class="black" value="1">1</option>
    <option class="black" value="2">2</option>
</select>

Answer 2

You say "without using JavaScript" but then accept an answer that uses JavaScript. If you simply want html5 to catch required and apply invalid, that happens automatically.

Your problem in this specific case is putting "Placeholder" in the value attribute of the first option. This causes the select to be valid. "Placeholder" is a valid value.

An empty value however is NOT valid, so just remove the "Placeholder" from the value attribute.

<select required>
    <option value="" selected disabled hidden>Placeholder</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

and your CSS would simply be:

select:required:invalid {
    color: red;
    border-color: red;
}

https://jsfiddle.net/e78fgkb0/1/

Even with this solution, your UX is not ideal as the form loads showing "errors" to your user. The more acceptable UX is to show errors after the user has made a mistake in entering data. This usually requires some JavaScript to present a better UX, which is kinda why we use it to overcome the limitations of pure HTML and CSS.