无法在 angular-ui-select 的 bootstrap 主题中调整插入符号的大小

Question

我正在尝试修改 angular-ui-select 右侧插入符号（向下箭头）的外观。通过将 css 属性放在

上，我已经能够对插入符号进行一些更改（例如，更改其颜色）

.ui-select-boostrap .ui-select-toggle > .caret

cssclass。然而，任何可以改变它的大小（高度、宽度、字体大小、背景大小）的东西都没有任何效果。

我查看了 angular-ui-select/dist 文件夹中的 select.css 文件，它在相关 class 上具有以下 css 属性：

.ui-select-bootstrap .ui-select-toggle > .caret {
  position: absolute;
  height: 10px;
  top: 50%;
  right: 10px;
  margin-top: -2px;
}

但是，到目前为止，这对我进行更改没有任何用处。即使直接在此 css 文件（或 min.css 文件）中更改 'height' 属性也无法解决问题。

Answer 1

更改边框的大小

.ui-select-bootstrap .ui-select-toggle > .caret {
    border-top: 20px solid black;
    border-right: 20px solid transparent;
    border-left: 20px solid transparent;
}

这可能会有用： https://css-tricks.com/snippets/css/css-triangle/

无法在 angular-ui-select 的 bootstrap 主题中调整插入符号的大小

Unable to resize caret in bootstrap theme of angular-ui-select

css

angular-ui-select