CODEWITHSUNDEEP
javascriptjqueryhtmlcss
methuselah
methuselah

Reputation: 13216

Overlay icon on input box

I am trying to overlay the x icon on my grey textbox, while maintaining it's 100% width. Is this possible? And if so, how? Up until this stage, all I can do is get it to work if the width of the grey textbox is 90%.

HTML

<div class="container" id="waypoints-page">
    <div id="waypoints">
        <div class="waypoint-container">
            <input type="text" class="form-control booking waypoint" placeholder="Via" id="first-waypoint">
            <label><i class="fa fa-times" id="clear-waypoint-button"></i></label>
            <hr>
        </div>
    </div>
</div>

CSS

.booking {
    outline: none;
    border: none;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    background-color: #ccc;
}
input.form-control.booking, .twitter-typeahead {
    width:100%;
    display: inline-block;
}
.tt-dropdown-menu {
    padding: 1em;
    background-color: #ccc;
    width: 100%;

Fiddle here

Upvotes: 2

Views: 3098

Answers (1)

user488187
user488187

Reputation:

Well, you can position it absolutely.

.container {
    position: relative;
}
.fa {
    position:absolute;
    top: 8px;
    right: 25px
}

See Fiddle.

Upvotes: 4

Related Questions