"Custom Input Or Select Box"
Bootstrap 4.1.1 Snippet by Walia5

Post to Facebook Tweet this

<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 ----------> <body style="background: #333;"> <div class="container"> <div class="row" style="margin-top:50px;"> <div class="col-md-4 mx-auto col-12"> <div class="b-select-wrap"> <select class="form-control b-select"> <option>Gender</option> <option>Male</option> <option>Female</option> </select> </div> </div> <div class="col-md-4 mx-auto col-12"> <div class="b-select-wrap"> <input class="form-control b-select" type="text" name="" placeholder="WaLia"> </div> </div> </div> </div> </body>
.b-select-wrap { border: none; color: #1092C9; overflow: hidden; position: relative; border-radius: 3px; } .b-select-wrap::after { content: "⌄"; position: absolute; right: 0px; top: -15px; z-index: 1; text-align: center; width: 10%; height: 100%; pointer-events: none; font-size: 35px; } .b-select { padding: 5px 15px; background-color: white; border: 0; outline: none; font-size: 22px; -webkit-appearance: none; /* for webkit browsers */ -moz-appearance: none; /* for firefox */ appearance: none; /* for modern browsers */ } /* remove default caret for ie */ .b-select::-ms-expand { display:none; }

Questions / Comments: