CODEWITHSUNDEEP
htmlcsstwitter-bootstrapforms
rakael
rakael

Reputation: 615

Combine "input" and "select" statement in one line

How I can get a nice view, when i want to have first an input-element and after a select statement.. It looks like this now:

<div class="form-group">
    <div class="input-group">
        <input class="form-control" type="text">
        <div class="input-group-addon">
            <select class="selectpicker form-control">
                <option value="test">Test</option>
            </select>
        </div>
    </div>
</div>

But I want something like on this page the element below: https://www.bootply.com/97519 But using select-statement instead of ul..

Upvotes: 0

Views: 2909

Answers (1)

Manish Patel
Manish Patel

Reputation: 3674

I think you want to like this:

.input-group-addon.select-input {
  width: 20%;
  padding: 0;
}

.input-group-addon.select-input select {
  border: none;
  height: 32px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="form-group">
    <div class="input-group">
        <input class="form-control" type="text">
        <div class="input-group-addon select-input">
            <select class="selectpicker form-control">
                <option value="test">Test</option>
            </select>
        </div>
    </div>
</div>

Upvotes: 5

Related Questions