【css】select实现placeholder效果

场景：使用select下拉选择框的时候，需要像其他控件一样提示默认信息。

问题：表单控件select没有placeholder属性。

解决方案：通过css实现，不需要js

<style>select > option[disabled]{ color:#999;cursor: not-allowed }/**禁止项的样式**/select > option[hidden]{ display: none }/**隐藏项的样式**/
</style><div class="row"><label class="control-label">语言种类</label><select class="form-control" ng-model="vm.languageType"><option value="" hidden>请选择</option><!--hidden实质就是设置了display: none--><!--<option value="" style="display: none;">请选择</option>--><option value="11">普通话</option><option value="22">英语</option><option value="33">俄语</option><option value="44">法语</option></select><select class="form-control" ng-model="vm.skillLevel"><option value="" disabled>熟练水平</option><option value="1">一般</option><option value="2">熟练</option><option value="3">精通</option></select>
</div>

其他表单控件的placeholder有初始颜色，select也需要设置成相同样式：

<style>/**此处我用的angular，控件上有ng-pristine表示初始状态，直接设置成同其他控件placeholder一样的样式**/.form-control::placeholder {color: #999;opacity: 1;}select.ng-pristine{color: #999;opacity: 1;}
</style>