Как убрать опцию выбора фона в bootstrap 4?

Question

Это мое изображение navbar. Я хочу удалить фон и границу опции выбора. И поместите некоторое пространство между двумя опциями выбора и строкой поиска. Как я могу это сделать? По желанию вы можете предложить, как выровнять элементы по горизонтали в navbar?

<div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="test.php"><i class="fa fa-home">Home</i><span class="sr-only">(current)</span></a>
            </li>

            <form class="form-inline"  action="./test.php?id=1" method="POST">
                <li class="nav-item">
                    <div class="form-group">
                        <select class="custom-select custom-select-lg mb-3"  name="objectType">
                          <option selected>Object Type</option>
                          <option value="Toy">Toy</option>
                          <option value="Furniture">Furniture</option>
                          <option value="Gift">Gift</option>
                          <option value="Household">Household</option>
                          <option value="Instrument">Instrument</option>
                        </select>
                    </div>
                </li>


                <li class="nav-item">
                    <div class="form-group">
                        <select class="custom-select custom-select-lg mb-3" name="materialType">
                          <option selected>Material Type</option>
                          <option value="Mud">Mud</option>
                          <option value="Cloth">Cloth</option>
                          <option value="Thread">Thread</option>
                          <option value="Jute">Jute</option>
                          <option value="Cotton">Cotton</option>
                          <option value="Can">Can</option>
                          <option value="Bamboo">Bamboo</option>
                        </select>
                    </div>
                </li>


                <li class="nav-item">
                    <div class="form-group">
                        <div class="input-group">
                            <input class="form-control" type="search" placeholder="Search" name="imageName">
                            <span class="input-group-btn">
                                <button class="btn btn-outline-secondary" type="submit" id="searchSubmit"><i class="fa fa-search"></i>
                                </button>
                            </span>
                        </div>
                    </div>
                </li>
            </form>

Для полной навигации newnavbar.php

Answer 1

Вот мое решение ..

используйте загрузочные классы bootstarp 4 - «ml-1» (margin-left: .25) или «mr-1» (margin-right: .25), чтобы оставить пробел между элементами списка.

<li class="nav-item ml-1"></li>

Для выбора добавить этот CSS: -

select{
  background: none;
  border: none;
}

Answer 2

для границы, поля и фона:

.custom-select {
  border: none;
  margin-right: 10px;
  background-color: transparent;
}

вот скрипка: https://jsfiddle.net/takius/ghwe204k/