CSS。具有不同字体大小的占位符和文本框

Question

我有一个字体大小为 45px 的输入字段。该字段应有一个字体大小为 18px 的占位符，占位符的垂直对齐方式应居中。我尝试了以下代码，但它在 Chrome 和 Opera 中不起作用。

你能帮我找到一个没有 JavaScript 的解决方案吗？

<input type="text" placeholder="Start typing your postal code..." />

   input {
        width: 300px;
        border: 2px solid red;
        padding: 0px 5px;
        line-height: 100px;
        font-size: 45px;
    }

    ::-webkit-input-placeholder {
        font-size: 18px;
        vertical-align: middle !important;
        line-height: 100px !important;
        color:#000;
        text-align:center;
    }
    ::-moz-placeholder {
        font-size: 18px;
        vertical-align: middle;
        line-height: 100px;
        color: #000;
        text-align: center;
    }
    :-ms-input-placeholder {
        font-size: 18px;
        vertical-align: middle;
        line-height: 100px;
        color: #000;
        text-align: center;
    }
    :-moz-placeholder {
        font-size: 18px;
        vertical-align: middle;
        line-height: 100px;
        color: #000;
        text-align: center;
    }

Answer 1

我认为您需要在伪元素前添加 input。试试这个：

input::-webkit-input-placeholder {
  font-size: 18px;
  vertical-align: middle;
  line-height: 100px;
  color: #000;
  text-align: center;
}

input::-moz-placeholder {
  font-size: 18px;
  vertical-align: middle;
  line-height: 100px;
  color: #000;
  text-align: center;
}

input:-ms-input-placeholder {
  font-size: 18px;
  vertical-align: middle;
  line-height: 100px;
  color: #000;
  text-align: center;
}

input::placeholder {
  font-size: 18px;
  vertical-align: middle;
  line-height: 100px;
  color: #000;
  text-align: center;
}

编辑

样式占位符似乎有限。但一种方法可能是使用 transform: translate(0, -50%);

input::placeholder {
  font-size: 18px;
  line-height: 100px;
  text-align: center;
  transform: translate(0, -50%);
}

CSS。具有不同字体大小的占位符和文本框

CSS. Placeholder and textbox with different font sizes

html

css

placeholder

vertical-alignment