如何删除输入[type =“ date”]的占位符文本？

问题描述

我有一个{/ {1}}，具有最小/最大范围。我想要实现的是隐藏以dd / mm / yyyy格式显示的占位符文本。到目前为止，已经尝试添加以下CSS。

input[type="date"]

但这不会产生预期的输出，因为我在元素上有一个范围验证器。

请提前告知并感谢。

解决方法

以下内容适用于Chrome。我不确定其他浏览器。 Safari似乎没有input类型的date

const $input = $('input');
$input.on('input',function(){
    $input.addClass('focused')
});

input::-webkit-datetime-edit { 
    color: transparent;
    user-select: none;
}

.focused::-webkit-datetime-edit{ 
  color: #000; 
  user-select: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='Date' />

查看this堆栈溢出帖子以获取更多信息

,

尝试一下：

.box{
  display: inline-block;
  background-color: red;
  position: relative
}
.box::after{
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  bottom: 2px;
  width: 80%;
  background-color: #fff;
}

<div class="box">
  <input type="date">
</div>

,

您可以使用::before伪元素替换占位符：

input[type="date"]::before {
  content: attr(placeholder);
  position: absolute;
  color: #999999;
}

input[type="date"] {
  color: #ffffff;
}

input[type="date"]:focus,input[type="date"]:valid {
  color: #666666;
}

input[type="date"]:focus::before,input[type="date"]:valid::before {
  content: "";
}

<input type="date" placeholder="Date" required>

,

占位符？

input[type="date"]::before{
content: attr(placeholder);
position: absolute;
color: rgba(0,0);
}

input[type="date"]{color: rgba(0,1);}