跨浏览器自定义格式化的html日期控件

Question

我需要一些帮助才能修改html日期控件（格式化自定义日期）.. 我坚持使用跨浏览器兼容性.. 在Chrome中，它工作正常，但Safari无法显示值.. 我在浏览器兼容性方面不太好.. 以下是描述问题的链接......

JSFiddle

input {
    position: relative;
    width: 150px; height: 20px;
    color: white;
}

input:before {
    position: absolute;
    top: 3px; left: 3px;
    content: attr(data-date);
    display: inline-block;
    color: black;
}

input::-webkit-datetime-edit, input::-webkit-inner-spin-button, 
input::-webkit-clear-button {
    display: none;
}

input::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 3px;
    right: 0;
    color: black;
    opacity: 1;
}

提前致谢..有人可以提供解决方案..