I would like to have this using bootstrap css:
I've written a jsfiddle to make my tests : http://jsfiddle.net/xr4uofje/
<div class="container">
<div class="col-lg-6">
<div class="input-group">
<input class="input-group-addon" size="8" type="text">
<span class="input-group-btn">
<select class="form-control"></select>
<button type="button" class="btn btn-default">Get</button>
</span>
</div>
</div>
</div>
you can put this type of elements
LIVE DEMO
HTML
<div class="container">
<div class="col-lg-6">
<div class="input-group my-group">
<input type="text" class="form-control" name="snpid" placeholder="Test"/>
<select id="lunch" class="selectpicker form-control" data-live-search="true" title="Please select a lunch ...">
<option>Hot Dog, Fries and a Soda</option>
<option>Burger, Shake and a Smile</option>
<option>Sugar, Spice and all things nice</option>
<option>Baby Back Ribs</option>
<option>A really really long option made to illustrate an issue with the live search in an inline form</option>
</select>
<span class="input-group-btn">
<button class="btn btn-default my-group-button" type="submit">GO!</button>
</span>
</div>
</div>
<div>
CSS
.my-group .form-control{
width:50%;
}
JQUERY
if ( $.browser.webkit ) {
$(".my-group-button").css("height","+=1px");
}
as document said.
Avoid using
<select>
elements here as they cannot be fully styled in WebKit browsers.
so we should use bootstrap's dropdowns with javascript code instead.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With