yyyyy yyyyy - 2 months ago 7
CSS Question

tab inside input type text

I need to create search form like on the picture but I don't know how to put inside tab with dropdown list. Currently I have such a code

enter image description here

<form action="" class="search-form">
<input type="text" class="form-control empty" id="iconified" placeholder="&#xF002;"/>
</form>

Answer

Just add the images in your styling in sudo elements(:after, :before).

#iconified {
  padding: 10px;
  width: 56%;
  border-radius: 7px;
  border: 2px solid #DDDDDD;
  outline: none;
}
input[type="submit"] {
  position: absolute;
  left: 308px;
  top: 16px;
}
select {
  position: absolute;
  left: 225px;
  top: 17px;
  background: none;
  border: 1px solid #DDD;
  border-top: 0;
  border-bottom: 0;
  outline: none;
}
<form action="" class="search-form">
  <input type="text" class="form-control empty" id="iconified" placeholder="search"/>
  <select name="" id="">
    <option value="">Option 1</option>
    <option value="">Option 2</option>
    <option value="">Option 3</option>
    <option value="">Option 4</option>
  </select>
  <input type="submit" value="Search">
</form>