css - How to have an image placeholder in angularjs -
i have search input box , when not selected shows search here
instead of text can have image?
code
<input id="autocomplete" type="text" ng-model="selected" typeahead="task.name task in tasklist | filter:$viewvalue | limitto:20" class="form-control" typeahead-on-select='onselect($item, $model, $label)' placeholder="search here" typeahead-focus-first="true" ng-disabled="loading" ng-blur="autocompleteblurred()" />
here plunker link can check.
you can directly using css
input#autocomplete { background-image: url(https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-16.png); background-position: 10px center; background-repeat: no-repeat; border: 1px solid #ccc; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; padding: 10px 5px; text-indent: 20px; -webkit-transition: 0.2s; -moz-transition: 2s; transition: 0.2s; } input#autocomplete:focus { background-position: -20px center; text-indent: 0; }
check plunker
in case if want text not remove placeholder="search"
input
Comments
Post a Comment