Designing A Select Drop-down

this is a very simple issue, to which I can't find a solution. I've created a select drop-down. But, it appears like two controls. like: -----------------

Solution 1:

Try something like the code given below, to create a custom drop down. (Change css property as per your requirement).

$("#timeToggler").on("click", function()
  {
  if($(".selectOption").is(":visible"))
    {
      $(".selectOption").hide();
      }
     else $(".selectOption").show();
  })

.customSelect {
  position: relative;
  display: inline-block;
  cursor: pointer;
  border: 1px solid lightgrey;
}

.toggler
{
  position:relative;
  z-index:1!important;
  width: auto;
  padding: 0 15px;
  background: #FFFFFF;
  color: #797979;
  display: inline-block;
}

.selectOption
{
  position: absolute;
  z-index: 22!important;
  background: #FFFFFF;
  border: 1px solid lightgrey;
  margin-top: 1px;
  padding: 4px 0px;
  right:0px;
  left:0px;
  min-width:190px;
}
.padding15 {
  padding: 0 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="customSelect">
   <span class="toggler" id="timeToggler">
      <span id="time">----</span>
      <span style="margin-left:10px;display : inline-block;" class="caret"></span>
   </span>
   <div class="selectOption" style="display : none">
       <div class="selectOptionRow" style="display: block;">
          <span class="padding15">opt1</span>
       </div>
     <div class="selectOptionRow" style="display: block;">
          <span class="padding15">opt2</span>
       </div>
     <div class="selectOptionRow" style="display: block;">
          <span class="padding15">opt3</span>
       </div>
   </div>
</div>