使用多选择以及在用户界面选择中显示的下拉三角形

时间 2019-02-22
阅读 38
点赞 0
收藏 0
连接xtreye

是否有任何方法可以保持下拉三角形(▼)的显示multiple模式ui-select

<div ui-select multiple ng-model="selectedItems" class="form-control">
    <div ui-select-match>
        <span>{{$item.name}}</span>
    </div>

    <div ui-select-choices repeat="item in availableItems" >
        <span>{{item.name}}</span>
    </div>  
</div>

我设法从普通人那里偷了三角牌ui-select

<i class="caret pull-right" ng-click="$select.toggle($event)"></i>

但在右侧的普通位置无法正确显示。有什么建议吗?谢谢。

建议答案

我得出的最佳方法是使用此CSS应用可缩放的背景SVG图像:

.select2-search-field {
    width: 100%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 13 6' fill='gray'><polygon points='0 1 8 1 4 5'></polygon></svg>");
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: right;
}
👍 0