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

它们可能非常有用，因此强烈建议仔细检查其中的一些内容，以至少了解可用的内容。

要获得有关跨浏览器怪癖的更多帮助，我还建议您检出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;
}

与输入框相比，样式选项列表中的不一致

1 个答案: