float-label-css icon indicating copy to clipboard operation
float-label-css copied to clipboard

Published 20 hours ago • verified publisher icon anydigital

select placeholder?

Open Julix91 opened this issue 7 years ago • 2 comments

This CSS code .has-float-label select:placeholder-shown:not(:focus) + * doesn't make sense to me. select can't have a placeholder attribute, it would have to be handled via a selected / disabled / hidden option. - Of course that's where the css only solution comes to the edges of what it can do - unless I'm missing something here.

https://codepen.io/Julix/pen/EXpVjz

Anyone know of a CSS way of getting the select's "placeholder" (i.e. disabled option) to display the label (and not when other things are selected)? -- Else, what's a simple js solution for this?

Julix91 avatar Jul 05 '17 22:07 Julix91

That's right. <select> support is limited.

My suggestion is to toggle some .placeholder-shown class for <select> fields via JS => that should allow to reuse the same styling.

tonystar avatar Jul 06 '17 17:07 tonystar

That's not a bad idea. Guess that's what JS is for, right? :)

Julix91 avatar Jul 20 '17 20:07 Julix91