html - SELECT OPTION 有条件地应用 CSS

Question

我正在尝试在位置数组中设置位置二的样式，以获得删除的外观、红色背景、被划掉的白色文本。如果用户选择此选项，则关闭下拉列表时所选的选项应显示与先前相同的红色划掉的标签。

这是我想要的下拉菜单关闭时选择的外观。

我的示例代码有两个问题，首先是看起来已删除的选项没有显示文本装饰:行通过样式...尽管 isDeleted CSS 类应用了红色背景和白色文本。

其次，当选择删除的选项时，处于关闭状态的下拉列表不会反射(reflect)任何选项样式，文本为黑色，白色背景，而我想要的显示在上面，红色背景，白色划掉的文本。

下图显示了打开的下拉菜单，我的光标悬停在蓝色的第一个选项上，删除的选项显示为红色。但是即使应用了该类，删除的选项也没有被划掉，为什么？

还尝试向 select 元素添加类样式，而不是向 option 元素添加类样式，但这会在应用删除的样式后更改所有选项。

How to style the option of an HTML select element?

$scope.locations = [
    {"label":"123 Main St","locno":1,"deleted":false},
    {"label":"456 Main St","locno":2,"deleted":true},
    {"label":"789 Main St","locno":3,"deleted":false}
];

$scope.oItem = {"itemName":"Strawberry","locno":2};

.isDeleted{
    background-color:red;
    color:white;
    text-decoration: line-through !important;
}
.isNotDeleted{
    background-color:white;
    color:black;
    text-decoration: none;
}

<select  ng-model="oItem.locno">
    <option disabled value="">select location</option>
    <option ng-repeat="opt in locations" 
            ng-value="{{opt.locno}}" value="{{opt.locno}}" 
            ng-class="{'isDeleted':opt.deleted, 'isNotDeleted':!opt.deleted}">{{opt.label}} -- {{opt.deleted}}</option>
</select>

Answer 1

对于第一个问题，我有一些坏消息要告诉你。由于元素本身的原因，对元素 select 进行样式设置是一场噩梦。

The element is considered impossible to style consistently cross-platform. However, some styles are workable

来源:https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms

CSS 属性 text-decoration 可能是 html 元素 option 样式中不支持的属性之一。但是，您可以考虑在 angularjs 中执行自己的指令，其工作方式类似于 select/option html 或使用 bootstrap 中的某些内容。

对于第二个问题，我已经更改了您的代码，如下所示并且它有效。

HTML:

<select  ng-model="oItem.locno" ng-class="styleOItem" class="selectedValueDeleted" ng-change="styleSelectOnChange()">
        <option disabled value="">select location</option>
        <option ng-repeat="opt in locations" 
                ng-value="{{opt.locno}}" value="{{opt.locno}}" 
                ng-class="{'isDeleted':opt.deleted, 'isNotDeleted':!opt.deleted}">{{opt.label}} -- {{opt.deleted}}</option>
      </select>

JS:

$scope.styleSelectOnChange = function() {
    angular.forEach($scope.locations, function(loopedObject) {
      if (loopedObject.locno === $scope.oItem.locno) {
        if (loopedObject.deleted) {
          $scope.styleOItem = "isDeleted";
        } else {
          $scope.styleOItem = "isNotDeleted";
        }
      }

    });
  };

骗子:https://next.plnkr.co/edit/kge3Uhw5iMPl1jXB?preview

我添加了 ng-class 来确定要应用的类。为了确定要应用的类，在“select”元素上的“ng-change”内使用了一个函数。

如果我误解了您的问题或者您需要进一步的解释，请告诉我。