CODEWITHSUNDEEP
csstwitter-bootstrap
MeTitus
MeTitus

Reputation: 3428

bootstrap - insert glyphicon next to input

I'm trying to insert an icon next to an inout type was was able to do it using this code

<div class="form-group">
    <label for="accountSpan">Account name</label>
        <div class="input-group input-group-unstyled">
            <span class="input-group-addon" id="accountSpan">something</span>
            <input type="text" class="form-control" placeholder="account name" aria-describedby="basic-addon1" id="accountInput">
            <span class="input-group-addon">
                <i class="glyphicon glyphicon-question-sign"></i>
            </span>
       </div>
</div>

and this css

            .input-group.input-group-unstyled input.form-control {
                -webkit-border-radius: 4px;
                   -moz-border-radius: 4px;
                        border-radius: 4px;
            }
            .input-group-unstyled .input-group-addon {
                border-radius: 4px;
                border: 0px;
                background-color: transparent;
            }

which I found in this thread Put search icon near textbox using bootstrap

But the given css changes the formating of the addon which results in

enter image description here

What is is I am missing? Thanks

Update

Removing background-color: transparent; will result in the addon having a border to

enter image description here

Upvotes: 0

Views: 1078

Answers (2)

Aazib I Gandhi
Aazib I Gandhi

Reputation: 86

<div class="col-sm-4 input-group">
   <input class="form-control">
   <span class="input-group-btn">
    <button  class="btn btn-default"><i class="glyphicon glyphicon-search"></i>
   </button>
   </span>                                                </div>

Upvotes: 3

potatopeelings
potatopeelings

Reputation: 41075

Just change your 2nd selector to

input-group-unstyled .input-group-addon:last-child {
    ...

Fiddle - https://jsfiddle.net/o1x3ubab/

Upvotes: 1

Related Questions