原生

Question

我使用bootstrap 3.3.7。这是我的HTML代码：

<body>Single select example
    <div class="selectRow">
        <select id="singleSelectExample">
            <option></option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
            <option value="5">Option 5</option>
        </select>
    </div>
</body>

以及它在客户端的外观：

这是工作JSFIDDLE !!!

我的问题是如何向左移动箭头。

我希望如何：

如何实现理想的外观？

Answer 1

我不认为这个问题与bootstrap有关，但问题的答案如下：

.select2-container .select2-choice .select2-arrow {
  left: 0;
  right: auto;
}

.select2-container .select2-choice > .select2-chosen {
  margin-left: 14px;
  margin-right: 0;
}

Updated fiddle

Answer 2

更改低于Css

.select2-container .select2-choice > .select2-chosen {
    margin-left: 16px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    float: none;
    width: auto;
    padding-right: 10px;
}

.select2-container .select2-choice .select2-arrow {
    display: inline-block;
    width: 18px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;

    border-left: 1px solid #aaa;
    border-radius: 0 4px 4px 0;

    background-clip: padding-box;

    background: #ccc;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccc), color-stop(0.6, #eee));
    background-image: -webkit-linear-gradient(center bottom, #ccc 0%, #eee 60%);
    background-image: -moz-linear-gradient(center bottom, #ccc 0%, #eee 60%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#eeeeee', endColorstr = '#cccccc', GradientType = 0);
    background-image: linear-gradient(to top, #ccc 0%, #eee 60%);

}

Answer 3

在页面中添加以下css

.select2-container .select2-choice > .select2-chosen{
         float: right;
         position: relative;
         margin: 0px;
       padding-left: 5px;
}

.select2-container .select2-choice > .select2-arrow{
         float: right;
         position: relative;
         margin: 0px;
       border-radius: 0;
}
.select2-container .select2-choice{
      padding: 0 8px 0 0;
}

如何在下拉列表中向左移动箭头

4 个答案:

原生