Html 设计选择下拉列表

这是一个非常简单的问题，我找不到解决办法。我已经创建了一个选择下拉列表。但是，它看起来像两个控件。比如：

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

税值
税

---

我不知道怎么了。有人能帮我解决这个问题吗？

试试下面给出的代码，创建一个自定义下拉列表。（根据您的要求更改css属性）

$（“#timeToggler”）。在（“单击”，函数（）
{
如果（$（“.selectOption”）是（“：可见”））
{
$（“.selectOption”）.hide（）；
}
else$（“.selectOption”）.show（）；
})

.customSelect{
位置：相对位置；
显示：内联块；
光标：指针；
边框：1px纯色浅灰色；
}
.扳机
{
位置：相对位置；
z指数：1！重要；
宽度：自动；
填充：0 15px；
背景：#FFFFFF；
颜色：#7979；
显示：内联块；
}
.选择选项
{
位置：绝对位置；
z指数：22！重要；
背景：#FFFFFF；
边框：1px纯色浅灰色；
页边顶部：1px；
填充：4px0px；
右：0px；
左：0px；
最小宽度：190px；
}
.填充15{
填充：0 15px；
}

----
opt1
opt2
opt3

您在这里讨论的是选项吗？常规选择标记是否，我是动态绑定值，而不是静态绑定值。