Bootstrap 3.0 Glyphicon Inside Input Box

by social_quotient

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<div class="input-group merged col-xs-6">
    <span class="input-group-addon"><i class="icon-location-arrow"></i></span>
    <input type="text" class="form-control" placeholder="Location" />
</div>

<div class="input-group merged col-xs-6">
    <span class="input-group-addon"><i class="icon-facebook-sign"></i></span>
    <input type="text" class="form-control" placeholder="facebook URL" />
</div>
<div class="input-group merged col-xs-6">
    <span class="input-group-addon"><i class="icon-twitter"></i></span>
    <input type="text" class="form-control" placeholder="Twitter hash tag" />
</div>

CSS

.merged {
    margin:10px;
}
.merged .input-group-addon {
    border-right: 0px;
    background-color: #FFFFFF;
}
.merged input {
    border-left: 0px;
    background-color: #FFFFFF;
}
.focusedInput {
    border-color: rgba(82,168,236,.8) ;
    outline: 0;
    outline: thin dotted \9;
    -moz-box-shadow: 0 0 8px rgba(82,168,236,.6);
         box-shadow: 0 0 8px rgba(82,168,236,.6);
}

JavaScript

$(function() {
    $(".merged input").on("focus blur", function() {
        $(this).prev().toggleClass("focusedInput")
    });
});