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。占位符和文本框具有不同的字体大小

1 个答案: