Блог

Посмотрите на 2 ввода, к которым применяются одинаковые стили CSS, первый — type=»text», второй — type =»password» Скриншот, показывающий отступы и высоту ввода

Общая высота (padding-top content-height padding bottom) меньше заявленной высоты (30 пикселей) для обоих входных данных, однако при вводе текста его содержимое отображается визуально. Ввод пароля выглядит пустым (и курсор не отображается).

С тех пор я исправил значения padding-top / -bottom, но это было после долгой борьбы, пытаясь отладить, почему поля пароля не «работали». Мне просто любопытно узнать, почему поведение отличается

Ссылка на JS Fiddle или посмотрите на HTML CSS:

HTML:

 <input type="text" value="hello"/>
<input type="password" value="hello"/>
  

CSS:

 * {
    box-sizing: border-box;
}

textarea, input[type="text"], input[type="password"], input[type="datetime"],       input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"] {
    height: 30px;
    line-height:30px;
    display:inline-block;
    vertical-align: middle;
}
textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"],     input[type="search"], input[type="tel"], input[type="color"] {
  padding: 16px 11px 16px 11px !important;
  font-size:14px !important;
  color:#333 !important;
  border: 1px solid black !important;
}
  

Это дефект вашего CSS.

Согласно вашему CSS, высота содержимого <input> составляет 30px — 16px — 16px — 1px — 1px = -4px . Итак, нет места для отображения содержимого.