<input type = "search"> not styling

Я пытаюсь создать простую панель поиска со значком поиска рядом с ним. Но я заметил, что не могу создать стиль ввода типа. Я попробовал это на сафари (версия 9.0.3 (11601.4.4)), а затем на chrome (версия 49.0.2623.110). Сначала я подумал, что это потому, что вход недействителен, но выяснил, что для поиска типа было бы неплохо.<input type = "search"> not styling

Единственное, что мне удалось стилизовать, это цвет фона, и он работал только в хроме.

Я также попытался удалить все мои стили CSS и только стиль ввода. Это не помогло.

Я пробовал искать его без успеха.

Это их способ обойти это или мне придется поместить свой тип ввода в текст, чтобы я мог его стилизовать?

Заранее благодарен!

КОД:

<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Test</title> 
    <style> 
     input { 
      padding: 10px; /* Does not work */ 
     } 
    </style> 
</head> 
<body> 
    <input type="search" placeholder="Search"> 
</body> 
</html>

этот код не работает в Safari и Chrome на OS X

EDIT: Я использую OS X, так что это может быть проблема с WebKit?

источник

2016-03-30 Samuel Kodytek

Покажите нам код Вашего HTML и CSS и что вы «Пробовал до сих пор. –

Есть способы, по которым вы можете сделать ввод, как если бы он был создан, например, как окно поиска в верхней части StackOverflow. Но, пожалуйста, отправьте пример своего кода. –

Невозможно ответить без html и css. –

Используйте appearance свойство, чтобы избежать propietary стилизации, а затем вы можете стилизовать:

input[type=search]{ 
    -moz-appearance: none;/* older firefox */ 
    -webkit-appearance: none; /* safari, chrome */ 
    appearance: none; /* rest */ 
}

Подробнее:

https://developer.mozilla.org/es/docs/Web/CSS/-moz-appearance

источник

2016-03-30 15:14:28

ИТАК на конце концов, я нашел GitHub форум: https://github.com/h5bp/html5-boilerplate/issues/396

Были ли они написаны, что его ошибка в Safari, и я должен добавить этот кусок кода для моих стилей:

input[type="search"] { 
    -webkit-appearance: textfield; 
}

и его починил это!

источник

2016-03-30 15:13:58

Вы избили меня на 10 секунд! LOL –

@ MarcosPérezGude Я все еще принял ваш ответ: P –

Спасибо, я ценю это. Мой ответ на ваш ответ :) –

<input type = "search"> not styling

ответ

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