无法在 angular-ui-select 的引导主题中调整插入符号的大小答案

【问题标题】：Unable to resize caret in bootstrap theme of angular-ui-select无法在 angular-ui-select 的引导主题中调整插入符号的大小
【发布时间】：2016-12-20 20:37:12
【问题描述】：

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

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

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

css 类。但是，没有任何东西可以改变它的大小（高度、宽度、字体大小、背景大小）有任何影响。

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

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

但是，这对我做出改变没有任何用处。即使直接在这个 css 文件（或 min.css 文件）中更改 'height' 属性也不能解决问题。

【问题讨论】：

标签： css angular-ui-select

【解决方案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/

【讨论】：

成功了！ 20px 对我的用例来说太大了，但 5 大致是我需要的，让它在标准尺寸的输入中更加突出。