css before do not align to the correct div

Question

I am creating a drop down but the font awesome down arrow do not display inside the correct div. You will see in the below code the font awesome for the "fbox" div shows at the end of the "sbox" div.

The HTML looks like this

 <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>

And the CSS looks like this

.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;
 }

The jsfiddle of this ticket is. https://jsfiddle.net/us40hw16/1/

Answer 1

If you want to align any absolute element, you must set position: relative to its parent.

• You need to set position: relative to fbox in order to align the font-awesome icon to select box.
• change appearance and -webkit-appearance to none in .fbox select to hide its default arrow.
• Add pointer-events: none in .fbox::before so that your drop-down can work on click of arrow
• Additionally, you must set position: relative to .sbox to prevent alignment issues of icon in future

.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>

link to JSFiddle

Answer 2

When you use absolute positioning, it positions itself relative to the nearest parent that is not statically positioned. You need to make .fbox position: relative so the :before element aligns to the right of it.

You also need to make the icon a colour other than white so it can be seen.