html - 设计一个选择下拉菜单

Question

这是一个非常简单的问题，我找不到解决方案。我创建了一个选择下拉列表。但是，它看起来像两个控件。喜欢:

               -----------------
             |     ----------     |  ------------
                  |    Tax    |                  |
             |     ----------     |  ------------
                -----------------

但我的要求是，它应该是这样的:

                ---------- ----------
               |   Tax    |          |
                ---------- ---------- 

第一个是选择按钮，第二个是空文本框。

我是这样尝试的:

<div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label class="col-sm-6">Tax Value</label>
                            <div class="col-sm-6">
                                <div class="input-group">
                                    <div class="input-group-btn">
                                        <select type="button" class="btn btn-default dropdown-toggle align-right" id="tax_toggle" name="tax_toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Tax <span class="caret"></span></select>
                                    </div>
                                    <input type="text" id="invoice_request_tax_value" name="invoice_request_tax_value" class="form-control" placeholder="Tax Value" required="required" readonly="readonly">
                                </div>
                            </div>
                        </div>
                    </div>

不知道怎么回事。有人可以帮我解决这个问题吗？

Answer 1

尝试使用类似于下面给出的代码来创建自定义下拉列表。 (根据您的要求更改 css 属性)。

$("#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>