Стилизация форм через боль

Глафира Жур

• Верстальщик в
• @glafirazhur
• @glafirazhur
• @Glafira

С чего
начался ад

Сколько шрифтов?

text, email, tel, url

textarea

Опасные свойства

button

search

Роман Прудников «Этот безумный search-bar»

number

Сбрасываем стили

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

checkbox

radio

Стилизация

• В разметке сначала input, потом label
  
• Прячем input (.visually-hidden)
  

• Стилизуем селектор input + label::before
  
• Стилизуем селектор input:checked + label::before
  

• Добавляем tabindex
  
• Убираем фокус у спрятанного input
  
• Добавляем aria-controls
  
• Добавляем JS-обработчик клавиатурных нажатий

file

file

Стилизуем file

• Скрываем type="file" (.visually-hidden)
• Стилизуем label и устанавливаем ему role="button"
• Устанавливаем tabindex="0" для label
• Устанавливаем tabindex="-1" для type="file"
• Устанавливаем aria-controls="file_id" для label
• Стилизуем label:focus
• JS для клавиатурных нажатий на label

date

time

select

Стилизация select

Общие рекомендации

• Стилизовать сам select, но не option
• Сохранять нативное поведение (для мобильных устройств)

За пределами боли

::placeholder

Стилизация ::placeholder

  ::-webkit-input-placeholder { color: #222; }
  ::-moz-placeholder          { color: #222; } /* Firefox 19+ */
  :-moz-placeholder           { color: #222; } /* Firefox 18- */
  :-ms-input-placeholder      { color: #222; }
  ::placeholder               { color: #222; }

Стилизация ::placeholder

• color
• font
• line-height
• vertical-align
• background
• opacity
• text-indent
• text-overflow
• text-transform
• word-spacing
• letter-spacing
• text-decoration

Дебажим ::placeholder в Chrome

Chrome DevTools → Settings → Elements →

Дебажим ::placeholder в Chrome

Дебажим ::placeholder в Firefox

:placeholder-shown

  :placeholder-shown { color: #222; }

 

:placeholder-shown - Caniuse

:placeholder-shown - W3C Working Draft

:focus

Стилизация :focus

  input {
    outline-color: #222;
    outline-width: 2px;
    outline-style: dotted;
    outline-offset: 5px;
  }

http://www.outlinenone.com/

Валидация

Атрибут required

Павел Ловцевич о валидации веб-форм

Уже совсем
не больно

fieldset и legend

Fieldset flexbox issue

WAI-ARIA Grouping Controls

Web Accessibility Initiative — Accessible Rich Internet Applications

    
    <div role="group" aria-labelledby="group_title">
        <p id="group_title">Group title</p>
        ...
    </div>
    
    

Милые браузеры

IE8

Safari

Ссылки:

• Property compatibility table for form widgets
• WAI-ARIA Grouping Controls
• WHATWG input specification
• Роман Прудников «Этот безумный, безумный, безумный, безумный search-bar»
• Павел Ловцевич о валидации веб-форм

Спасибо за внимание!

• Глафира Жур
• @glafirazhur
• @glafirazhur
• @Glafira