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工作o.k.在chrome中，但是它没有显示选项标签的边框。我该如何解决这个问题？

Answer 1

不幸的是，所有浏览器都以不同的方式设置自己的表单组件，因此您不太可能使用适用于所有主浏览器的纯CSS获得所需的结果。

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

选择标签本身很容易设置样式（如果你应用外观更容易：none;这将删除浏览器的默认样式），但不能设置选项标签的样式。

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

即将边框设置为选项标签

1 个答案: