css - 即设置边框选项标签

Question

我正在尝试为每个选项元素创建边框:

 <select multiple class="myScrollDiv" name="selectedGroup"  [(ngModel)]="selectedGroup"> 
  <option *ngFor="let group of  groupOptions" [ngValue]="group"  class="myul-{{group.g}}"  >
         {{group.g}}
  </option> 
</select>

我的CSS:

.myExtDialog .myScrollDiv
 {  display: block;
    height: 234px;
    width : 100%;
    overflow: auto;
    border: none;
    background-color:whitesmoke;
    line-height: 16px;
    text-align: left;
 }
.myExtDialog .myScrollDiv option 
{
     border : 1px grey solid  ; 
}

CSS 工作正常。在 chrome 中，但在 ie 中，它不显示选项标签的边框。我该如何解决这个问题？

Answer 1

不幸的是，所有浏览器对它们自己的表单组件的样式都不同，因此您不太可能使用适用于所有主要浏览器的纯 CSS 获得您想要的结果。

这篇文章很旧，但信息仍然相关 - https://css-tricks.com/dropdown-default-styling/

设置 select 标签本身的样式很容易(如果应用 appearance: none 会更容易；这将删除浏览器的默认样式)，但不能设置 option 标签的样式。

如果您真的需要设置选项标签的样式，您可能需要考虑使用 javascript。