css раньше не выравнивать по правильному div

Question

Я создаю раскрывающийся список, но стрелка вниз не отображается внутри правильного div. В приведенном ниже коде вы увидите, что шрифт awesome для div "fbox" отображается в конце div "sbox".

HTML выглядит так

 <div class="fbox">
    <select class="search_dropdown" name="search_dropdown" id="search_dropdown">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
</div>
<div class="sbox"> 
  <input type="text" class="search_filter" id="search_filter" placeholder="Search for names..">
</div>

И CSS выглядит так

.fbox select {
   background-color: #F8F8F8;
   color: #33333;
   padding: 12px;
   width: 250px;
   border: none;
   font-size: 16px;
   -webkit-appearance: button;
   appearance: button;
   outline: none;
   border-radius: 5px 0px 0px 5px;
 }

 .fbox::before {
   content: "\f13a";
   font-family: FontAwesome;
   position: absolute;
   top: 0;
   right: 0;
 }

jsfiddle этого билета. https://jsfiddle.net/us40hw16/1/

Answer 1

Если вы хотите выровнять любой элемент absolute, вы должны установить position: relative его родительским.

• Вам нужно установить position: relative на fbox, чтобы выровнять font-awesome значок для выбора окна.
• измените appearance и -webkit-appearance на none в .fbox select, чтобы скрыть стрелку по умолчанию.
• Добавьте pointer-events: none в .fbox::before так что раскрывающийся список может работать при нажатии стрелки
• Кроме того, вы должны установить position: relative на .sbox, чтобы предотвратить проблемы с выравниванием значка в будущем

.search_wallview {
    overflow: visible!important;
}

.search_intro {
  margin-top: 30px;
  background-color:#005959;
  color:#FFFFFF;
  font-size: 16px;
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 20px;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  height: 600px; 
  background-position: center;
  background-repeat: no-repeat; 
  background-size: cover; 
}

.search_position {
    position: relative;
    padding: 4px 0 10px 0;
    max-width: 800px;
  margin: 250px auto 0 auto;
}

.search_inputgroup {
   position: relative;
   display: flex;
   width: 100%;
}

#search_filter{
  font-size: 16px; /* Increase font-size */
  padding: 12px 20px 13px 40px; /* Add some padding */
  border: 1px solid #ddd; /* Add a grey border */
  border-radius: 0px 5px 5px 0px;
  width: 100%; /* Full-width */
}

.sbox {
  width: 60%; /* Full-width */
  position: relative;
}

.sbox::before {
  content: "\f002";
  font-family: FontAwesome;
  position: absolute;
  top: 10px;
  right: 20px;
  color: #333;
}

.search_dropdown{
   display:inline-block;
   width: 40%; /* Full-width */
   height: 47px; 
}

.search_result {
    background-color:white;
    color:black;
      padding: 4px 0 10px 0;
      max-width: 790px;
    max-height: 200px;
    overflow: auto;
    margin:auto;
}

.search_line {
  height: 30px;
  line-height: 30px;
}

.search_line:hover {
   background-color: #EFEFEF;
}

/* Drop down css  */
.fbox {
  position: relative;
}
.fbox select {
  background-color: #F8F8F8;
  color: #33333;
  padding: 12px;
  width: 250px;
  border: none;
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  border-radius: 5px 0px 0px 5px;
}

.fbox::before {
  content: "\f13a";
  font-family: FontAwesome;
  position: absolute;
  top: 15px;
  right: 3px;
  color: #4d4d4d;
  pointer-events: none;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="search_wallview">
<div class="search_intro">  
  <div class="search_position">
    <div class="search_inputgroup">
     <div class="fbox">
        <select class="search_dropdown" name="search_dropdown" id="search_dropdown">
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </select>
    </div>
    <div class="sbox"> 
      <input type="text" class="search_filter" id="search_filter" placeholder="Search for names..">
    </div>
  </div>
</div>
  <div id="search_result" class="search_result">line</div>
</div>
<div style="clear: both;"></div>
</div>

ссылка на JSFiddle

Answer 2

Когда вы используете абсолютное позиционирование, он позиционируется относительно ближайшего родителя, который не позиционируется статически. Вам нужно сделать .fbox position: relative так, чтобы элемент: before был выровнен по правому краю.

Вам также нужно сделать значок не белого цвета, чтобы его можно было видеть.