300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > angular中通过CSS使下拉列表默认值变灰

angular中通过CSS使下拉列表默认值变灰

时间:2024-08-02 10:51:24

相关推荐

angular中通过CSS使下拉列表默认值变灰

angular版本:angular5

先看效果图:

drop down的样式是我用CSS样式控制的,没有用插件。想要改变Drop Down List里的默认值的颜色,我的思路是这样的。

在<select>标签里添加一个样式(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 Value</option>3<option value="1">Test Value1</option>4<option value="2">Test Value2</option>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) { 9if (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:”属性,别的没效果。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。