How to remove input-group <select> arrow in bootstrap 4?

Question

How can i remove that horrible looking double arrow in select ? Any other answears about this article that i found doesn't work.

    <div class="form-group">
      <label for="date">Date</label>
      <div class"row">
        <div class="col-5">
          <input.....>
        </div>
        <div class="col-7">
          <div class="input-group">
            <select class="custom-select">
              <option.....>
            </select>
          </div>
        </div>
      </div>
    </div>

Image:

I tried those solutions:

• How to remove the arrow in dropdown in Bootstrap 4?
• Remove arrows from form element select in Bootstrap 3
• Select removing dropdown arrow
• How to replace arrow dropdown select in boostrap
• Change color and appearance of drop down arrow

but not works.

Answer 1

If you simply want to remove the arrows, you should force apply background style for your custom-select class as those arrows are set as background. Try the below code as reference.

.custom-select{
background: none !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
      <label for="date">Date</label>
      <div class"row">
        <div class="col-5">
          <input.....>
        </div>
        <div class="col-7">
          <div class="input-group">
            <select class="custom-select">
              <option.....>
            </select>
          </div>
        </div>
      </div>
    </div>

Hope this helps