angular版本:angular5
先看效果图:
drop down的样式是我用CSS样式控制的,没有用插件。想要改变Drop Down List里的默认值的颜色,我的思路是这样的。
在标签里添加一个样式(thisSelectFirstItem),并给它赋值一个flag(entityFlag),如果点击这个下拉列表,判断选中的option的值是否为空。 如果为空,entityFlag的值就是true,选中的值就是默认值,会用你定义的样式(thisSelectFirstItem)。在这个样式里改变text的颜色。 先看html代码: 1 <select class="dropEntityNameCss" [ngClass] = "{'thisSelectFirstItem':entityFlag}" [(ngModel)]="dropEntiyName" name="dropEntiyName" (ngModelChange)="dropEntityNameChange(dropEntiyName)"> 2 <option selected value="">Default Valueoption> 3 <option value="1">Test Value1option> 4 <option value="2">Test Value2option> 5 select> 在贴上TS代码: 1 // css control flag 2 entityFlag: boolean = true; 3 resonFlag: boolean = true; 4 5 constructor() { } 6 7 ngOnInit() { } 8 dropEntityNameChange(inputDropName: string) { 9 if (inputDropName.length === 0 ) { 10 this.entityFlag = true; 11 } else { 12 this.entityFlag = false; 13 } 14 } 最后贴上改变默认值的CSS样式: 1 select.thisSelectFirstItem { 2 -webkit-text-fill-color: #999999; 3 } 在CSS样式里只能用“-webkit-text-fill-color:”属性,别的没效果。 Angularangular5selectDefault 相关 angularjs $emit $on $broadcast 父子 兄弟之间传值 k8s-调度亲和性和污点容忍、指定调度节点(nodeSelector) Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregate Eclipse:The selection cannot be launched,and there are no recent launches selectd选项跳转链接 Python + Selenium 定位非selected型下拉框的方法 [ZT]js 操作select和option常见用法 Angular + ant design布局中实现国际化 大爽Python入门教程 4-3 函数传参 形参、实参 default、*args、**kwargs 前端MVC学习总结(三)——AngularJS服务、路由、内置API、jQueryLite union注入之select 再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结 标签 一品网 冀ICP备14022925号-6