Bootstrap：刪除下拉字段的邊框和箭頭

Question

如何在不使用高度的情況下刪除下拉箭頭並同時在使用Bootstrap 3時隱藏邊框？

這裏是一個plunk我試圖做到這一點。隱藏箭頭（類自定義選擇）基於this blog複製this code。

也許是更好的檢查了普拉克，但這裏是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 */ 
} 

編輯：如果我添加到我的無邊界邊境重要的話，它解決了邊界有關的問題：

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

所以後來仍然toggeling定製選擇去除/添加下拉列表，箭頭時，高度變化問題...

Answer 1

使用!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;，而你給它一個邊框，youself。相反，我只是刪除了它。或者您也可以將其更改爲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屬性。你應該刪除一個。