Размещение фонового изображения на элементе формы с помощью CSS-спрайтов - PullRequest
Новая
       33

Размещение фонового изображения на элементе формы с помощью CSS-спрайтов

4 голосов
/ 28 января 2012

Я пытаюсь получить увеличительное стекло в качестве фона для моего элемента ввода.Значок увеличительного стекла является частью CSS-спрайта, который выглядит следующим образом:

enter image description here

Для позиционирования я использовал следующие свойства: 

#search-form input[type="text"] {
    background: url('../images/icons.png') no-repeat left center;
    background-position: 0px -30px;
    border: 1px solid #a9e2ff;
    padding: 3px;
    width: 200px;
    font-size: 1em;
    padding-left: 20px;
}

Но фон по-прежнему отображается в верхней части поля ввода, а не выравнивается по вертикали в середине и влево.Я также пытался сделать:

background: url('../images/icons.png') no-repeat left middle;

, но это тоже не работает.

Если это имеет значение, хотя я предполагаю, что это не так,вот моя разметка формы: 

<form action="/search" method="get" id="search-form">
    <input type="text" placeholder="Search..." name="s">
</form>

Спасибо за любую помощь.

1 Ответ

7 голосов
/ 28 января 2012

Вы объявили background-position два раза. Первый в конце свойства background, второй на следующей строке. Решение : Разделить все одиночные background правила, подобные этим (дополнительно, 0 -24px - правильное значение) : 

#search-form input[type="text"] {
    background-image: url('http://i.stack.imgur.com/MFpLm.png');
    background-repeat: no-repeat;
    background-position: 0 -24px;
    border: 1px solid #a9e2ff;
    padding: 3px;
    width: 200px;
    font-size: 1em;
    padding-left: 20px;
}

И теперь вы можете столкнуться с реальной проблемой вашего дизайна: другие спрайты будут видны в области ввода, если между ними нет достаточного пространства.

...