Как оформить текстовые поля в Safari и Chrome

Question

Я еще не тестировал его в IE.

Я хочу стилизовать фоновое изображение и форму текстового поля, а также границы для панели поиска на моем сайте [dead site].

Если вы посетите его в Firefox или Opera и увидите панель поиска в левом столбце, то я к этому и стремлюсь.Теперь, если вы посетите его в Safari или Chrome, вы должны увидеть, что оно заменено их полем ввода по умолчанию, что делает текст неразборчивым.

Как мне оформить текстовое поле даже в этих браузерах?1007 *

Answer 1

Для ясности, на вашем сайте вы на самом деле вводите поле search , а не поле text .

<input type="search"> <!-- This is what you have -->

против

<input type="text">

Чтобы удалить стиль по умолчанию и позволить вашим свойствам css работать, вам нужно изменить свойство -webkit-appearance.Это должно сделать трюк:

#s {
    min-width:98%;
    background-color:#2a2a2a;
    color:#d3d3d3;
    border:2px solid #000000;
    font-size:.85 em;
    height:1.9em;
    display:inline !important;
    border-radius:5px 5px 5px 5px;
    outline:none;
    -webkit-appearance: none; /* add this */
}

Answer 2

style.css

    body {
background: #999 url(your_image_here.jpg);
}

.search {
width: 295px; /* 300px less the 5px of left padding*/
height: 30px;
line-height: 30px; /* same as height, then you can vertically align the text in the middle*/
vertical-align: middle;
font-size: 24px; /* this gives 3px at the top and bottom */
background-color:#ccc; /* a light grey background in the text box */
color:#333; /* dark grey font colour */
padding-left: 5px; /* spacing (padding) within the left hand side of the text box */
border: 1px solid #000; /* 1px wide black border around the text box */
display:inline !important;
border-radius:5px 5px 5px 5px; /* slightly rounded corners, the order of the values is TOP RIGHT BOTTOM LEFT */
outline:none;
-webkit-appearance: none; /* this removed the default styling */
}

index.html

<input type="text" class="search" value="search"> <!-- I've given the text box a value (search) so that you can test your css edits quickly without having to type in a value every time you refresh the page -->

Я думаю, что это отвечает на ваш вопрос. Ответьте мне в комментариях, если я могу оказать какую-либо помощь.

Вот ссылка на jsfiddle, где вы можете сделать небольшое быстрое создание прототипа моего примера.

http://jsfiddle.net/mstnorris/nVDbA/