如何让datepicker日期选择器的输入框placeholder占位符居中显示

要实现输入框placeholder占位符居中对齐，只需要通过CSS为占位符伪元素设置text-align: center属性即可，需要注意添加不同浏览器的兼容性前缀保证多端效果一致。

示例代码 #

你原有HTML代码如下：

<input required type="text" placeholder="yyyy/mm/dd" id="fecha_form" name="fecha_form">

添加对应的CSS样式即可：

/* Webkit内核浏览器（Chrome、Safari、新版Edge等） */
#fecha_form::-webkit-input-placeholder {
  text-align: center;
}

/* 火狐浏览器 */
#fecha_form::-moz-placeholder {
  text-align: center;
  opacity: 1; /* 可选：火狐默认占位符透明度较低，加此属性保持和其他浏览器样式统一 */
}

/* IE10/11、旧版Edge */
#fecha_form:-ms-input-placeholder {
  text-align: center;
}

/* 现代浏览器通用标准写法 */
#fecha_form::placeholder {
  text-align: center;
}

补充说明 #

如果你希望用户实际输入的文本也居中显示，只需要额外给input元素本身添加text-align: center属性即可：

#fecha_form {
  text-align: center;
}

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