webkit htm5 css reset для входных элементов - PullRequest
Новая
       54

webkit htm5 css reset для входных элементов

7 голосов
/ 18 июня 2011

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

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

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

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

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

Я знаю, что вы можете настроить таргетинг на него с помощью

input::-webkit-input-placeholder

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

В поисковую информацию входит белый bg и удаляетсязакругленные углы, определенные в базовом классе 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 (в соответствии с веб-инспектором), которые влияют на него.Есть ли возможность сброса, которая может сделать это, так что, несмотря на то, что dctype является HTML5, элементы отображаются так же просто, как они были до HTML5, и следуют неявным правилам, установленным для них в базовом CSS?

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

Ответы [ 5 ]

5 голосов
/ 27 июня 2011

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

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

3 голосов
/ 19 октября 2012

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

1 голос
/ 17 сентября 2013

Мне кажется, это отлично работает: 

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;
}
0 голосов
/ 23 июня 2011

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

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

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

0 голосов
/ 22 июня 2011

Цитирование из «HTML5: работает и работает» , Марк Пилигрим:

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

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

...