html - how to place icon inside input tag in asp.net mvc5? -
i new asp.net mvc5. trying put search icon inside search bar appears outside bar. can 1 tell solution? here snapshot , code. enter image description here
and code here..
<div class="banner-g"> <div class="container"> <div id="user-info"> <div class="navbar-form navbar-right"> <form action="/home/browse" id="searchform" method="get"> <div class="inner-addon left-addon"> <a href="#" id="submitsearch" style="text-decoration: none; right: 14px; color: rgb(204, 204, 204); top: 6px; "> <i class="glyphicon glyphicon-search"></i></a> <input class="form-control input-sm" data-val="true" data-val-length="the field search must string maximum length of 150." data-val-length-max="150" data-val-regex="please use letters, numbers, spaces, periods, commas, question/ exclamation marks, dollar sign, underscores, hyphens, apostrophes, parentheses, forward , slashes, colon , semi colons" data-val-regex-pattern="^[0-9a-za-z/'() .,!?$:-;_-]+$" id="search" name="search" placeholder="search markets" type="text" value="" /> <input type="hidden" name="issearch" value="true"> </div> </form> </div> </div> </div> </div>
and in bootstrap file
.glyphicon { position: relative; top: 1px; display: inline-block; font-family: 'glyphicons halflings'; -webkit-font-smoothing: antialiased; font-style: normal; font-weight: normal; line-height: 1; }
i thankful help.
you should using bootstrap input group component. can find documented here.
like this:
<div class="input-group"> <input type="text" class="form-control" placeholder="username" aria-describedby="basic-addon1"> <span class="input-group-addon glyphicon glyphicon-search" aria-hidden="true"></span> </div>
here demo.
Comments
Post a Comment