Bootstrap: 移除下拉菜单框的边框和箭头

Question

Bootstrap: 移除下拉菜单框的边框和箭头

4

我该如何在使用Bootstrap 3时去除下拉箭头，同时不影响高度并隐藏边框？

这里有一个plunk，我尝试在其中实现此功能。隐藏箭头（class custom-select）基于this blog，复制了this code。

也许最好先查看一下plunk，但这是CSS：

.no-border {
    border: 0;
    box-shadow: none;
}

.custom-select {
    background-color: #fff;
    border: 1px solid #ccc;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 0 2em;
    padding: 0;
    position: relative;
    width: 100%;
    z-index: 1;
}

.custom-select:hover {
    border-color: #999;
}

.custom-select:before {
    color: #333;
    display: block;
    font-family: 'FontAwesome';
    font-size: 1em;
    height: 100%;
    line-height: 2.5em;
    padding: 0 0.625em;
    position: absolute;
    top: 0;
    right: 0;
    text-align: center;
    width: 1em;
    z-index: -1;
}

.custom-select select {
    background-color: transparent;
    border: 0 none;
    box-shadow: none;
    color: #333;
    display: block;
    font-size: 100%;
    line-height: normal;
    margin: 0;
    padding: .5em;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.custom-select select::-ms-expand {
    display: none; /* to ie 10 */
}

.custom-select select:focus {
    outline: none;
}

/* little trick for custom select elements in mozilla firefox  17/06/2014 @rodrigoludgero */

/* pseudo class https://developer.mozilla.org/en-US/docs/Web/CSS/:any */

:-moz-any(.custom-select):before {
    background-color: #fff; /* this is necessary for overcome the caret default browser */
    pointer-events: none; /* https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events  */
    z-index: 1; /* this is necessary for overcome the pseudo element */
}

如果我在我的无边框边框中添加!important，那么它就可以解决与边框相关的问题。

.no-border {
    border: 0 !important;
    box-shadow: none;
}

因此，在切换自定义选择器以删除/添加下拉箭头时，仍然存在高度变化问题...

- EricC

尝试一下 - http://jsfiddle.net/dfdon4gb/ - Anonymous

我在你的CSS中添加了.custom-select:before{display:none !important;}以满足你的第一个要求：“如何在不影响高度的情况下删除下拉箭头？”请参见此处 - http://jsfiddle.net/xj3zjLmz/ - Anonymous

哦，现在看明白了。但是它解决了什么问题（与我已经有的plunk相比，链接在问题中）？箭头的移除是有效的（就像你的fiddle中一样）。我的问题是增加的高度（如果您在fiddle中添加一些内容并删除/添加custom-select-class，或者只是查看我的plunk，您会看到这一点），以及同时删除边框。 - EricC

如果我在我的无边框边框定义中使用“!Important”，那么它就解决了边框问题。然后添加的高度问题仍然存在... - EricC

@MaryMelody，您的小提琴使用了 font-awesome 字体。而问题发起者没有使用这个字体。如果是这种情况，您可以很容易地通过从选择器中删除 fa-caret-down 类来移除箭头。 - Oberst

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Oberst · Accepted Answer

使用!important应该只作为最后的手段使用。在我看来，这是一种懒惰的方式。

在你的.custom-select类中，有两件事情。

.custom-select {
    background-color: #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 0; /* "0 0 2em" reads as margin-top: 0; margin-left: 0; margin-right: 0; margin-bottom: 2em; (32px) */
    padding: 0;
    position: relative;
    width: 100%;
    z-index: 1;
}

您的边距是margin: 0 0 2em;，并且您自己添加了边框。我只是将其删除了。或者您可以将其更改为border: 0;

还有：语义...但是：

<select id="status" class="form-control" ng-class="{'no-border': border}" id="inputEmail3">
    <option>First option</option>
    <option>Another option</option>
    <option>We also have a tird</option>
</select>

您有两个id属性。您应该删除其中一个。