With HTML **<select>** one can set the default selected item like this:

<option value=”blaah” selected>

But how to do it with HTML5 and DataList select?

Googled and didn’t find really a suitable solution so here’s the hack came up with: I added the default value into “placeholder” variable and then with the server-side language (I used PHP but you could use anything) I check if the POST/GET is empty and if it is then it means we have the default value.

Finally, I added into CSS:

::placeholder {
color: black;
}

So now it also looks right and doesn’t give the user the feeling that it’s a placeholder and something needs to be done even if the default value is the one he would pick.

--

--

Kaspar L. Palgi
Kaspar L. Palgi

Written by Kaspar L. Palgi

Backend programmer and veteran tech enthusiast. Mentoring and writing tech books. Team lead at CrewNew.com / lead developer at Klarity.app

No responses yet