css - 样式选项列表与输入框不一致

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 样式，你可以使用伪类选择器 ::placeholder 除了输入选择器 input[type=email ]。

如果你想调整option样式，你可以使用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/

编辑:

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