如何将样式应用于角度js中选择下拉列表的选项元素？答案

【问题标题】：How to apply style to option elements of select dropdown in angular js?如何将样式应用于角度js中选择下拉列表的选项元素？
【发布时间】：2016-03-23 16:18:57
【问题描述】：

我在 HTML 中有一个 select 元素，它有一个 Angular js 的 ng-repeat 属性来呈现可用的选项，如下面的代码 sn-p -

<select id="mySelect" ng-model="dummyModel" ng-init="dummyModel=0"                
                           ng-disabled="false" style="width:200px;">
                                <option value="0">--Select--</option>
                                <option ng-repeat="elem in list"
                                        value="{{elem.id}}">
                                    {{elem.description}}
                                </option>
                            </select>

我可以使用“样式”属性设置选择下拉菜单的宽度。但是，我无法将样式应用于选项元素。我还想为所有选项元素设置 200 像素的固定宽度。我怎样才能做到这一点？任何建议都非常感谢。

注意：我已经尝试过使用下面的 CSS 类，但它不起作用:(

#mySelect*
{
 width:200px;
}

另外，我尝试在选项标签上使用 ng-style="myOptionStyle() 属性，如下所示，但效果不佳:(

<option ng-repeat="elem in list" value="{{elem.id}}"  
        ng-style="myOptionStyle()>
                      {{elem.description}}
</option>

在 Angular js 控制器中 -

 $scope.myOptionStyle = function () {
                return { 'width': '200px;' };
            };

提前致谢。

【问题讨论】：

“如何将样式应用于 Angular js 中选择下拉菜单的选项元素” - Angular 与此有什么关系，这不是 css 是为了..?!!
如果能提供jsfiddle就更好了
另外，请考虑使用ng-options 来加载您的下拉列表，而不是ng-repeat 来加载您的选项。
@DfrDkn select#mySelect, select#mySelect option { max-width:200px; }
@yjs.... select#mySelect, select#mySelect option { max-width:200px; } 没用 :(

标签： jquery css angularjs

【解决方案1】：

为具有特定属性或属性值的 HTML 元素设置样式。

选项[值] { 背景颜色：黄色； }

【讨论】：

【解决方案2】：

很遗憾，这是不可能的。操作系统是渲染 <option> 元素而不是 HTML 的操作系统，因此它更多地依赖于操作系统。

这是MSDN的摘录：

除了background-color 和color，通过option 元素的样式对象应用的样式设置将被忽略。此外，直接应用于单个选项的样式设置会覆盖应用于整个选择元素的样式设置。

【讨论】：

那么，是否有任何解决方法可以将样式应用于选项元素？
@DfrDkn 你应该研究一个使用其他元素创建下拉菜单的插件
是的，在一定程度上。正如@TJ 提到的，考虑为此目的使用插件。
@DfrDkn SelectBoxIt 是允许您设置选项元素样式的插件示例。不过还有很多其他的。希望对您有所帮助！