Резиновые INPUT

Курсы Завершающие испытания
1

###Доброго времени суток.

С удовольствием прохожу Ваши курсы, но возникают вопросы.

При прохождении первого задания, захотел сделать INPUT’ы TEXT, PASSWORD и SUBMIT “резиновыми” по ширине, чтобы не указывать им width в px (вдруг ширина формы изменится), натолкнулся на статью http://habrahabr.ru/sandbox/20613/ и обернул поля ввода:

<div class="resize-way-margin-from-right">
    <input type="text" placeholder="Логин"></input>
</div>

<div class="resize-way-margin-from-right">
    <input type="password" placeholder="Пароль">
</div>

input[type="text"],
input[type="password"]
input[type="submit"]{
    width:100%;
}
.resize-way-margin-from-right{
    margin-right:35px;
}

Причём, SUBMIT оборачивать не пришлось. Действительно, при изменении ширины формы, поля ввода растягиваются.

Не сочтите за труд прояснить ситуацию:

  1. Почему не пришлось “лечить” SUBMIT, ведь у него тоже есть padding?
  2. Насколько корректен такой подход, каковы стандартные приёмы?
  3. Есть ли разница в использовании одинарных и двойных кавычек, и где?
<input type="text">
<input type='text'>

http://codepen.io/Yarik/pen/OPwRJE
Спасибо.

2

Инпуту submit не пришлось применять дополнительный отступ, т.к. браузер ему присваивает по умолчанию box-sizing: border-box;. Это означает, то все внутренние отступы включаются в ширину 100% и не увеличивают её. Для обычных полей вода box-sizing стандартный content-box и паддинга прибавляются в общей ширине.

Как вариант можно для всех инпутов задать box-sizing: border-box; и 100% ширины, если ваш проект IE8+.

В использовании двойных или одинарных кавычек разницы нет. Но двойные красивее. :smile:

1 лайк
3

А еще некоторые плагины работают только с двойными, иначе пишут ошибку синтаксиса =)

4

Ок. Значит буду везде использовать двойные. Во-избежании…