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: 015px;
  background: #FFFFFF;
  color: #797979;
  display: inline-block;
}

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

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