Bootstrap: Remove border and arrows for dropdown field - css

Question

How can I remove the dropdown-arrows without messing up the height and at the same time hide the border when I use Bootstrap 3?
Here is a plunk where I try to do this. The hide arrow (class custom-select) is based on this blog copying this code.
Perhaps better check out the plunk, but here is the 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 */
}
Edit: If I add !important to my no-border border, then it solves the border-related problem:
.no-border {
border: 0 !important;
box-shadow: none;
}
So then remains the height-change issue when toggeling custom-select for removing/adding the dropdown-arrows...

Answer 1

Using !important should really be used only as a last resort.
In my opinion, its the lazy way out.
In your .custom-select class, you have two things
.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;
}
Your margin was margin: 0 0 2em;, and you were giving it a border, youself. I just removed that, instead. Or you could just change it to border: 0;
Also: Semantics... But:
<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>
You have two id attributes. You should remove one.