Html 删除 type=date 的 html5 输入元素中存在的默认文本/占位符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28686288/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove default text/placeholder present in html5 input element of type=date
提问by Sreekanth
I am using html input element with type as date,
我正在使用类型为日期的 html 输入元素，
<input type="date">
When I use above element it creates a default date format i.e. mm/dd/yyyy text within that input element. How do I remove this default text?
当我使用上述元素时，它会在该输入元素中创建默认日期格式，即 mm/dd/yyyy 文本。如何删除此默认文本？
I tried adding below style on my page but it is hiding the selected date value as well,
我尝试在我的页面上添加以下样式，但它也隐藏了选定的日期值，
input[type=date]::-webkit-datetime-edit-text {
-webkit-appearance: none;
display: none;
}
input[type=date]::-webkit-datetime-edit-month-field{
-webkit-appearance: none;
display: none;
}
input[type=date]::-webkit-datetime-edit-day-field {
-webkit-appearance: none;
display: none;
}
input[type=date]::-webkit-datetime-edit-year-field {
-webkit-appearance: none;
display: none;
}
采纳答案by Steffi A.
::-webkit-datetime-edit-year-field:not([aria-valuenow]),
::-webkit-datetime-edit-month-field:not([aria-valuenow]),
::-webkit-datetime-edit-day-field:not([aria-valuenow]) {
color: transparent;
}
回答by Kenneth
Possible option
可能的选择
HTML:
HTML：
<input type='date' required>
CSS:
CSS：
input[type=date]:required:invalid::-webkit-datetime-edit {
color: transparent;
}
input[type=date]:focus::-webkit-datetime-edit {
color: black !important;
}
回答by Robin Carlo Catacutan
The accepted answer doesn't seem to work anymore on latest chrome versions. Tested it on Version 50.0.2661.102 and didn't work.
接受的答案似乎不再适用于最新的 chrome 版本。在版本 50.0.2661.102 上测试它并没有工作。
Works by adding this instead:
通过添加以下内容来工作：
.mdl-textfield:not(.is-dirty) input::-webkit-datetime-edit {
color: transparent;
}
input:focus::-webkit-datetime-edit {
color: rgba(255, 255, 255, .46) !important;
}
回答by Radin Reth
This should be transparent only when value is not set.
仅当未设置 value 时，这才应该是透明的。
input[value="0000-00-00"]::-webkit-datetime-edit {
color: transparent;
}
回答by Abshir
this worked fine for me:
这对我来说很好用：
input[type=date]::-webkit-inner-spin-button,
input[type=date]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
input[type=date] {
-moz-appearance: textfield;
}
回答by andy
This works for me in chrome as of Version 73.0.3683.103
从 73.0.3683.103 版开始，这对我在 chrome 中有效
::-webkit-datetime-edit { color: transparent; }
:focus::-webkit-datetime-edit { color: #000; }
I couldn't figure it out for Edge though so i changed it to this
我无法为 Edge 弄明白，所以我把它改成了这个
input[type=date] { color: transparent !important; }
.active input[type=date] { color: inherit !important; }
this may not be good for some of you but i was adding the class of active anyway as my labels hover of the input field until clicked and then i move them up out the way. Hence why i needed to not display the date placeholder while the label was over the input
这可能对你们中的一些人不利，但我添加了 active 类，因为我的标签悬停在输入字段上，直到被点击，然后我将它们移开。因此，为什么我需要在标签超过输入时不显示日期占位符
回答by user1626664
This works in chrome and doesn't make the value dissapear when set (Version 74)
这适用于 chrome，并且在设置时不会使值消失（版本 74）
input[value=""]::-webkit-datetime-edit{ color: transparent; }
input:focus::-webkit-datetime-edit{ color: #000; }
回答by alitrun
<input name="date" type="text" onfocus="(this.type='date')" onblur="if(!this.value)this.type='text'">
Thank to Hai Nguyen.
感谢海阮。
回答by Tofik Al-Radi
Actually you can take advantage of the default placeholder generated by Chrome by using the following code. This code also works with dates fetched from the database:
实际上，您可以使用以下代码利用 Chrome 生成的默认占位符。此代码也适用于从数据库中获取的日期：
<div class="Input">
<script>
function getDate() {
var GET_DATE = document.getElementById("ThisElement").value="<?php echo $GetDateFromMySQL = date('d/m/Y', strtotime($row_FetchedResults["MySQLColumnName"]));?>";
return GET_DATE;
}
</script>
<input class="form-control"
style=" text-align: left; border: none;"
onfocus="(this.type='date')"
onblur="
if(this.value===''){
this.type='text';
this.value='';
this.value= getDate();
}
else{
this.value;
}"
id="ThisElement"
type = "text"
value = "<?php echo $GetDateFromMySQL = date('d/m/Y', strtotime($row_ActiveStudents["ChaseUpDate"]));?>"
/>
