Cross browser Custom formatted html date control

Question

i need some help to modify a html date control (custom date formatted).. I am stuck with cross browser compatibility.. In Chrome , it works fine, but safari could not display the value.. I am not so good in cross browser compatibility.. following is the link to describe the issue...

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;
}

Thanks in advance..Someone could provide solution..