According to my observation: <select> elements can be quite tricky to style, mainly because of the OS- and vendor-specific styles that can interfere with customization. The most effective approach is to completely reset the element by utilizing the appearance property set to none, and then substituting a background image for the dropdown arrow.
Another issue in your styling is that you have defined a padding of 18px on the select element, while its height is only 30px. This results in the content having no space (in fact, -6px) to display properly. To resolve this, reduce the vertical padding to a lower value so that the text displays correctly, for example, I used padding: 4px 18px.
In the sample below, I incorporated a dropdown arrow from Google Material Icon's collection converted into base64 code. Any SVG can easily be transformed into base64 using this platform.
.container {
position: relative;
width: 100%;
max-width: 500px;
margin: 0px auto;
margin-top: 100px;
padding: 40px;
background-color: #fafafa;
border: 1px solid #d8dbdf;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.i_bd select {
background-color: rgb(255, 255, 255, 1) !important;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
/* Make sure to decrease top/bottom padding! */
padding: 4px 18px;
color: #333333;
font-size: 13px;
font-weight: 500;
outline: none;
border: 1px solid rgba(239, 239, 239, 1);
width: 80px;
height: 30px;
/* Remove vendor-specific appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Utilize triangle background as arrow */
background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTcgMTBsNSA1IDUtNXoiLz48L3N2Zz4=);
background-size: 24px 24px;
background-repeat: no-repeat;
background-position: center right;
}
.i_bd {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-flex-shrink: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
position: relative;
float: left;
margin-right: 10px;
}
<div class="container">
<div class="i_bd">
<select name="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
</div>