bootstrap - insert glyphicon next to input

Question

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

What is is I am missing? Thanks

Update

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

Try to remove this: `background-color: transparent;` and `border: 0px;` — node_modules, Apr 12 '16 at 11:22
Could you specify how are you expecting to have styled. The code just work also without this styles, just loading _Bootstrap_. — Lionel T, Apr 12 '16 at 11:27
What are you trying to say, that you want the addon with the icon ? without a color or the something addon ? — E.Agolli, Apr 12 '16 at 11:35

score 3 · Answer 1 · answered Apr 12 '16 at 11:45

3

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

answered Apr 12 '16 at 11:45

Aazib I Gandhi

86
7

it's the simplest way to do so – Aazib I Gandhi Apr 12 '16 at 11:46
The simplest way is what @potatopeelings recomended, but thanks for your input :) – MeTitus Apr 12 '16 at 12:07

score 1 · Accepted Answer · answered Apr 12 '16 at 11:38

1

Just change your 2nd selector to

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

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

answered Apr 12 '16 at 11:38

potatopeelings

40,709
7
95
119

Thaks. Just a quick question. What is syntax doing? is it like inheritance? .input-group-unstyled .input-group-addon:last-child { – MeTitus Apr 12 '16 at 12:05
without `:last-child` that styles would be applied for all the `.input-group-addon` elements (i.e. both the label and the icon). `:last-child` tells the browser to apply the style only if the element is the last element in its wrapper (i.e. only for the icon) – potatopeelings Apr 12 '16 at 12:10

bootstrap - insert glyphicon next to input

2 Answers2