<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/> <div class="select"> <select name="email" id="email"> <option>aaaa1</option> <option>aaaa2</option> <option>aaaa3</option> <option>aaaa4</option> <option>aaaa5</option> <option>aaaa6</option> </select> </div>

.select { border: 1px solid #ccc; overflow: hidden; height: 40px; width: 240px; position: relative; display: block; } select{ height: 40px; padding: 5px; border: 0; font-size: 16px; width: 240px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .select:after { content:"\f0dc"; font-family: FontAwesome; color: #000; padding: 12px 8px; position: absolute; right: 0; top: 0; background: red; z-index: 1; text-align: center; width: 10%; height: 100%; pointer-events: none; box-sizing: border-box; }