纯CSS实现select的placeholder效果

思路:利用CSS伪类,为select添加伪类required,即不能为空;而默认选项(Placeholder)的value为空,触发invalid,实现不选时置灰的效果;


Demo:



效果如下:

纯CSS实现select的placeholder效果_第1张图片


兼容性:

Chrome,FF 完美实现

Safari,IE11,Edge(下拉列表中可见palceholder,但是不能选)

低版本IE待验证

你可能感兴趣的:(CSS)