如何设置input标签尺寸放大、输入文本垂直居中且placeholder居左上角

直接上可运行的代码实现，修改对应尺寸参数即可适配你的需求：

HTML 结构 #

<input type="text" class="custom-large-input" placeholder="提示文本">

CSS 样式 #

.custom-large-input {
  /* 自定义输入框尺寸，可按需修改 */
  width: 450px;
  height: 90px;
  box-sizing: border-box;
  /* 内边距设置：上方留足placeholder的显示空间，上下内边距差让输入内容垂直居中 */
  padding: 30px 15px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 18px;
  /* 行高设置配合内边距，让输入文本垂直居中 */
  line-height: 50px;
  outline: none;
}

/* 适配不同浏览器的placeholder样式 */
.custom-large-input::-webkit-input-placeholder {
  font-size: 14px;
  color: #999;
  /* 向上偏移到左上角位置，数值可随输入框高度调整 */
  transform: translateY(-22px);
  opacity: 1;
}
.custom-large-input::-moz-placeholder {
  font-size: 14px;
  color: #999;
  transform: translateY(-22px);
  opacity: 1;
}
.custom-large-input:-ms-input-placeholder {
  font-size: 14px;
  color: #999;
  transform: translateY(-22px);
  opacity: 1;
}

实现说明 #

• 输入框的内边距和行高配合，保证用户输入的文本始终处于垂直居中状态
• 对placeholder伪类设置向上偏移，固定显示在输入框左上角，不影响输入文本的位置
• 所有尺寸、颜色参数均可根据你的设计需求自行调整

内容的提问来源于stack exchange，提问作者Jens Klein