Designing a select drop-down - html

Question

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:
-----------------
| ---------- | ------------
| Tax | |
| ---------- | ------------
-----------------
But my requirement is, it should be something like this:
---------- ----------
| Tax | |
---------- ----------
First one is a select button and the second is an empty textbox.
This is how I tried:
<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>
I don't know what's wrong. Can someone help me to fix this?

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