Выполнение ввода type = "text" с CSS3 и фиксированным изображением на фоне

Question

Я занимаюсь разработкой своего первого веб-сайта на HTML5 / CSS3 и хочу делать все, что я могу, правильно и с хорошими методами, а также быть пригодным для использования.

Мне нужно воспроизвести следующий поисковый запрос на этом сайте:

То, что я не знаю, как это сделать, это реализовать фон изображения, или если изображение должно быть <input type="image" />.

На данный момент, я имею следующее:

#header-search input {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border:1px solid #8e8e8e;
    background-color:#f5f5f5;
    height:16px;
    padding:4px;
    color:#4a4a4a
}

Это создает ввод с тем же радиусом, и вся область является входным текстом.Там нет места для увеличительного стекла, и если это был фон, изображение не может быть нажата.В этом пункте, что лучше?Пусть вход только сработал или ... как вы это сделаете?

В любом случае, вы сделаете это, пожалуйста, скажите мне.

Заранее спасибо!

Answer 1

Вы можете использовать кнопку отправки с фоновым изображением и расположить ее над окном поиска.

Не забудьте добавить отступ справа от поля ввода, чтобы кнопка не перекрывалась.( я также добавил класс в окно поиска, чтобы правила не предназначались для тех же элементов )

Html

<form id="header-search">
    <input type="text" class="searchbox" /><input type="submit" class="button" value="" />
</form>

Css

#header-search{overflow:auto;}

#header-search input.searchbox {
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     border:1px solid #8e8e8e;
     background-color:#f5f5f5;
     height:16px;
     padding:4px;
     padding-right:28px;
     color:#4a4a4a;
     float:left;
 }

#header-search input.button{
    border:0;
    padding:0;
    margin:0 0 0 -24px;
    width:24px;
    height:24px;
    background:transparent url('your-search-icon-path-here') center center  no-repeat;
    float:left;
}

конечный результат

демо http://jsfiddle.net/gaby/F5Nmp/1/

Answer 2

Лучшее, что я мог придумать, это следующее, что немного сложнее, чем мне хотелось бы:

#header-search, button {
    display: inline-block;
    vertical-align: baseline;
    border:1px solid #8e8e8e;
    background-color:#f5f5f5;
    height:30px;
    padding:4px;
    color:#4a4a4a;
    margin: 0;
    float: left;
}
#header-search {
    -webkit-border-radius: 5px 0 0 5px;
    -moz-border-radius: 5px 0 0 5px;
    border-radius: 5px 0 0 5px;
    border-right-width: 0;
}
button {
    -webkit-border-radius: 0 5px 5px 0;
    -moz-border-radius: 0 5px 5px 0;
    border-radius: 0 5px 5px 0;
    border-left-width: 0;
}

И включает в себя изменение разметки (и добавление button type="submit", чтобы оно содержало изображение увеличительного стекла, вздох ...):

<input type="search" id="header-search" />
<button type="submit">
    <img src="http://davidrhysthomas.co.uk/linked/search.png" />
</button>

JS Fiddle demo .

Примечание: обратите внимание, что по какой-то неизвестной мне причине я использовал id из #header-search на самом input , а не на родительском элементе. Таким образом, ваш селектор должен быть изменен по сравнению с тем, который я использовал в приведенном выше примере.

<ч /> Отредактировано , потому что оно выглядело неправильно, с контуром, в фокусе, следуя прямоугольнику поиска input (проверьте оригинальную демонстрацию JS Fiddle ). Итак, я заменил контур на border смену цвета, чтобы он выглядел немного более «естественным»:

#header-search:focus {
    border-color: #f90;
    border-right-width: 0;
}

#header-search:focus + button[type=submit] {
    border-color: #f90;
    border-left-width: 0;
}

Пересмотренная демонстрация JS Fiddle .

Answer 3

Вы должны попробовать:

background-image : url(path/to/your/image/relative/to/css/file) no-repeat;
background-position : right;

Вам не нужно

<input type="image"/> <!-- this can be used to replace a submit control
                           for example, but not what you need I think -->

Вам также следует рассмотреть возможность использования более конкретного правила CSS (для предотвращения стилизации других входных данных)

#header-search input[type="text"]