Как разместить изображение в angularjs

У меня есть поле ввода поиска, и в настоящее время, когда оно не выбрано, оно отображается Search here, но вместо текста у меня есть изображение?Как разместить изображение в angularjs

enter image description here

код

<input id="autoComplete" type="text" ng-model="selected" typeahead="task.name for 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()" />

Вот plunker link вы можете проверить.

источник

2015-06-04 Ricky

проверки этой темы HTTP: // StackOverflow .com/questions/13761654/html5-image-icon-to-input-placeholder – kachhalimbu

вы также можете проверить это: http://stackoverflow.com/questions/22655493/how-can-i-style-individual-parts- из-ан-вход-заполнитель/22655903 # 22655903 – dfsq

Вы можете сделать это непосредственно с помощью 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: all 0.2s; 
    -moz-transition: all 2s; 
    transition: all 0.2s; 
} 
input#autoComplete:focus { 
    background-position: -20px center; 
    text-indent: 0; 
}

Проверить это plunker

В случае, если вы хотите, текст не следует также удалять placeholder="Search" с вашего входа

источник

2015-06-04 06:42:25 abi1964

Как разместить изображение в angularjs

ответ

Смежные вопросы