Text box alignment and corner style in form - css

Question

I'm trying to align and style a form. My first attempt was
<form action="myUrl" class="form-horizontal" method="post">
<div class="form-group">
<label class="control-label col-sm-2">Set ID</label>
<div class="col-sm-4">
<input class="form-control" id="setId" name="setId" placeholder="Enter value" type="text" value="">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Customer ID</label>
<div class="col-sm-4 input-group">
<input class="form-control" id="customerId" name="customerId" placeholder="Enter value" type="text" value="">
<span class="input-group-btn">
<button class="btn btn-default lookup-button" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
<div class="form-group">
<input class="btn btn-default" type="submit" id="submit" value="Search">
</div>
</form>
However, my two text boxes have their left edges aligned differently as seen here
I tried adding input-group to the div that encloses the first text box and that solved the alignment issue, but it causes the corners of the text box to become hard corners rather than being rounded as seen here
<form action="myUrl" class="form-horizontal" method="post">
<div class="form-group">
<label class="control-label col-sm-2">Set ID</label>
<div class="col-sm-4 input-group">
<input class="form-control" id="setId" name="setId" placeholder="Enter value" type="text" value="">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Customer ID</label>
<div class="col-sm-4 input-group">
<input class="form-control" id="customerId" name="customerId" placeholder="Enter value" type="text" value="">
<span class="input-group-btn">
<button class="btn btn-default lookup-button" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
<div class="form-group">
<input class="btn btn-default" type="submit" id="submit" value="Search">
</div>
</form>
I also tried adding an empty <span> into my first text box, along with the input-group class. That causes the left corners to become rounded, but the right corners stay square. The right edge also becomes slightly misaligned with the right edge of the text box below it as shown here
Is there a way that I can cause my text boxes to align evenly on their left edges, while having the first text box maintain its rounded corners (without adding a superfluous icon into the first text box)?

Answer 1

You should use the class input-group in another div and this will solve the problem of the input behavor
see code snippet:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form action="myUrl" class="form-horizontal" method="post">
<div class="form-group">
<label class="control-label col-sm-2">Set ID</label>
<div class="col-sm-4">
<input class="form-control" id="setId" name="setId" placeholder="Enter value" type="text" value="">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Customer ID</label>
<div class="col-sm-4">
<div class="input-group">
<input class="form-control" id="customerId" name="customerId" placeholder="Enter value" type="text" value="">
<span class="input-group-btn">
<button class="btn btn-default lookup-button" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2"></label>
<div class="col-sm-4">
<input class="btn btn-default" type="submit" id="submit" value="Search"> </div>
</div>
</form>

Answer 2

Try this
CSS
.lookup-button span.glyphicon{
border-left:1px solid #e1e1e1;
padding:8px;
}
HTML
<form action="myUrl" class="form-horizontal" method="post">
<div class="form-group">
<label class="control-label col-sm-2">Set ID</label>
<div class="col-sm-5">
<input class="form-control" id="setId" name="setId" placeholder="Enter value" type="text" value="">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Customer ID</label>
<div class="col-sm-5">
<input class="form-control" id="customerId" name="customerId" placeholder="Enter value" type="text" value="">
</div>
</div>
<div class="form-group">
<button class="btn btn-default lookup-button" type="submit">
submit
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
</form>
i have modified some of your html. Here you need not use the input type[submit], simply replace it with . It functions the same way.
i have styled the submit button and organised some code
Link for Reference
Hope this helps