Блог

У меня есть следующий код, в котором я вижу несоответствие в оформлении между оформлением текста-заполнителя в поле ввода электронной почты и оформлением содержимого поля параметров, это особенно заметно в 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;
}
  

Если вы хотите настроить стиль заполнителя, вы можете использовать селектор pesudo-class ::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

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

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

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

Редактировать:

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