Несоответствие в списке параметров стиля по сравнению с полем ввода

Question

У меня есть следующий код, в котором я вижу несоответствие в стилях между стилем текста заполнителя в поле ввода электронной почты и стилем содержимого поля параметров, это особенно заметно в Firefox, где содержимоеокно параметров выглядит жирным по сравнению с текстом заполнителя «Электронная почта».Я задаюсь вопросом, возможно ли получить более последовательный взгляд между этими двумя, сохраняя то же самое семейство шрифта и размер шрифта.

html:

<input type="email" name="email" placeholder="Email">

<br />
<select>
     <option selected>Option 1</option>
</select>

css:

  input[type=email] {
    width: 320px;
    height: 20px;
    background-color: #E9F2F9;
    border: none;
    margin-top: 20px;
    margin-left: 20px;
    padding-top: 8px;
    padding-bottom: 12px;
    padding-left: 9px;
    position:relative;
}

select {
  font-size: 15px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.02px;
  width:329px;
  height:40px;
  padding-left:9px;
  padding-top:8px;
  padding-bottom:12px;
  background: #E9F2F9;
  color:#666666;
  border:none;
  display: inline-block;
  cursor:pointer;
  position: relative;
  margin-left: 20px;
  margin-top: 20px;
}

Answer 1

Если вы хотите настроить стиль заполнитель , вы можете использовать селектор псевдо-класса ::placeholder в дополнение к селектору ввода input[type=email].

Если вы хотите настроить стиль , вы можете использовать option.

Таким образом, вы можете синхронизировать стили элементов:

option, input[type=email]::placeholder {
  font-family: Helvetica;
  text-transform: Uppercase;
  font-size: 1em;
  background-color:yellow;
}

Конечно, вы можете использовать любые свойства, которые пожелаете. Это позволит вам переопределить любые настройки браузера по умолчанию, которые могут повлиять на внешний вид.

Вот еще немного информации о псевдоклассах:

• https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

Они могут быть чрезвычайно полезны, поэтому настоятельно рекомендуем ознакомиться с некоторыми из них, чтобы хотя бы получить представление о том, что доступно.

Для получения дополнительной информации о кросс-браузерных особенностях я также рекомендую проверить библиотеку нормализации:

• http://nicolasgallagher.com/about-normalize-css/

EDIT:

select, option, input[type=email]::placeholder {
  color: black;
  font-family: Helvetica;
  font-size: 16px;
  font-weight: 500;
  text-transform: capitalize;
}