challenge with SELECT OPTION element in html css [duplicate]

<select name="position" id="position">
    <option value="" disabled selected>Position</option>
    <option value="sales">Sales</option>
    <option value="network">network</option>
</select>

.filter-query{
  display: flex;
  padding: 0px 5px;
  margin: 10px 20px;
}
.select-wrap {
  border: 1px solid #118AB2;
  border-radius: 5px;
  padding: 0 5px;
  width:70px;
  background-color:#fff;
  position:relative;
  margin: 5px;
  height: 30px;
}

.select-wrap select, .query{
  background-color: #fff;
  border:0px;
  height:30px;
  font-size: 12px;
  margin: 0;
}


#filter-result{
  background: #118AB2;
  color: #fff;
  font-family: sans-serif;
  border-radius: 5px;
  margin: 5px;
  height: 30px;
  border: 1px solid #118AB2;
}
.text{
  border: 1px solid #118AB2;
  border-radius: 5px;
  width: 115px;
  margin: 5px;
  height: 30px;
}

<div class="filter-query">
    <input class="query text" type="text" placeholder="first name">
    <input class="query text" type="text" placeholder="last name">
    <div class="select-wrap">
        <select name="position" id="position">
            <option value="" disabled selected>Position</option>
            <option value="sales">Sales</option>
            <option value="network">network</option>
        </select>
    </div>
    <div class="select-wrap">
        <select name="date" id="date">
            <option value="" disabled selected>Date</option>
            <option value="Jan">Jan</option>
            <option value="Feb">Feb</option>
        </select>
    </div>
    <input class="query btn" type="button" value="Filter result" id="filter-result">
    <div class="select-wrap">
        <select name="sort" id="sort">
            <option value="" disabled selected>Sort by</option>
            <option value="firstName">first name</option>
            <option value="position">position</option>
        </select>
    </div>
</div>