webkit htm5 сброс css для элементов ввода

Это несколько раздражает. Похоже, что webkit (через chrome 13 canary) имеет право стилизовать различные типы ввода и сильно противоречит дизайну.

В частности, они вызывают у меня головную боль:

  • свечение выбранного элемента (через контур)
  • заполнитель = стиль текста
  • уродливое свечение вокруг сфокусированного текстового поля и полей ввода

Я использую шаблоны и modernizr.

Простой input[type=search] с заполнителем переопределяет стиль текста.

Я знаю, что вы можете нацелить его через

input::-webkit-input-placeholder

Тем не менее, похоже, что это не может стилизовать такие вещи, как text-shadow, что немного дерьмо. Кто-нибудь знает, вероятно, это ошибка, которая будет исправлена, или мне нужно вернуться к решению-заполнителю JavaScript?

На входе поиска появляется белый фон и удаляются закругленные углы, определенные в базовом классе CSS. Я нашел код сброса:

input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  display: none;
}

input[type=search] {
  /* the webkit overrides need to stay at the top */
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
  /* your styles here */
}

и вроде помогает.

Свечение вокруг элементов формы я исправляю установкой outline: none.

Я предполагаю, что мне действительно нужен сброс CSS, который удаляет любые предопределенные стили в user agent stylesheet (согласно веб-инспектору), которые на него влияют. Есть ли доступный сброс, который может сделать это, поэтому, несмотря на то, что тип документа является HTML5, элементы отображаются так же просто, как и до HTML5, и следуют неявным правилам, установленным для них в базовом CSS?

Я ненавижу это говорить, но, несмотря на все проблемы с перегрузкой памяти и медлительность плагинов, FireFox 4 на самом деле все делает идеально. Webkit не должен пытаться стилизовать вещи за вас, просто предоставьте API, который позволит вам сделать это, если вы захотите...


google-chrome html css webkit css-reset
person Dimitar Christoff    schedule 18.06.2011    source источник
comment
Какой смысл бросать украшение вокруг <input type=search>? Оформление — единственное, что отличает его от обычного поля type=text. Вы также можете просто использовать <input type=text>, если вам не нужно украшение.   -  person Spudley    schedule 18.06.2011
comment
семантика и, возможно, поведение портативных устройств. какой смысл в любом из элементов html-5, мы все равно устраивали div и input[type=text]. :) дело в том, что я должен иметь возможность стилизовать их, но это должно быть необязательно, если я захочу, а не через набитые стили пользовательского агента   -  person Dimitar Christoff    schedule 18.06.2011
comment
@Spudley В (по крайней мере) Safari ‹input type=search› также имеет кнопку x (очистить), если вводится текст.   -  person Joel L    schedule 29.03.2013

Ответы (5)


arrow_upward
5
arrow_downward

Хорошей таблицей стилей сброса формы (с небольшим количеством JS) является Formalize.

Formalize сбрасывает все, а затем работает, чтобы обеспечить согласованность форм в разных браузерах.

person christiangeek    schedule 27.06.2011
comment
ура, в то время как это не то, что я бы использовал, github.com/ nathansmith/formalize/blob/master/assets/css/ предлагает несколько интересных идей, так что я их приму. - person Dimitar Christoff; 27.06.2011

arrow_upward
3
arrow_downward

Хотя это может потребовать от вас определения дополнительных стилей, я обычно ставлю -webkit-appearance:none на большинство элементов формы.

person Dan Nelson    schedule 19.10.2012

arrow_upward
1
arrow_downward

Кажется, это отлично работает для меня:

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance:none;
}
input[type=search] {
  -webkit-appearance:textfield;
  -webkit-box-sizing:content-box;
}
person Community    schedule 17.09.2013

arrow_upward
0
arrow_downward

Цитата из "HTML5: Up and Running" Марка Пилгрима:

«Атрибут placeholder может содержать только текст, а не HTML-разметку. Однако существуют некоторые расширения CSS для конкретных поставщиков (http://trac.webkit.org/export/37527/trunk/LayoutTests/fast/forms/placeholder-pseudo- style.html), которые позволяют стилизовать текст-заполнитель в некоторых браузерах.

Поэтому я предполагаю, что вам придется прибегнуть к сценарию решения, по крайней мере, для этого аспекта вашего вопроса, особенно с учетом того, что пока ни одна версия IE не поддерживает текст-заполнитель.

person daysrunaway    schedule 22.06.2011

arrow_upward
0
arrow_downward

Стили сброса CSS — это всегда хорошее начало, поскольку они избавляют вас от головной боли.

Если вы хотите удалить свечение, вы, вероятно, можете немного поиграть со свойством контура, как вы сказали, также может помочь установка text-shadow:none.

В любом случае, это просто предположение, если вы сначала не попытаетесь сбросить стили с помощью сброса, ведь они сделаны специально для того, чтобы веб-страницы отображались одинаково в каждом браузере.

person Jose Faeti    schedule 23.06.2011
comment
в том-то и дело, что они не отображаются одинаково в каждом браузере. Я очень доволен тем, как это делает FireFox, но не webkit. - person Dimitar Christoff; 23.06.2011
comment
Тогда я бы определенно начал с сброса таблицы стилей, до сих пор я был доволен, например, YUI CSS Reset, Fonts и Base. В любом случае, в конце концов я закончу тем, что создам свою собственную таблицу стилей, потому что многие из этих вещей не нужны для моих веб-сайтов, а есть другие, которые мне нужны, но их нет. Но это действительно полезно в любом случае. - person Jose Faeti; 23.06.2011
comment
В шаблоне используется смешанный сброс css, который берет элементы как из YUI, так и из других. но они не охватывают стили элементов ввода html5. - person Dimitar Christoff; 27.06.2011