Remove the dd/mm/yyyy placeholder from a HTML input-CodePudding

<input type="date" required>
<label>Birthdate</label>

I have this code in a register form and it shows the label "Birthdate" overwritten in the same place as the dd/mm/yyyy placeholder. Is there anyway I can remove it?

I tried this in CSS but it didn't work:

input[type=date]:required:invalid::-webkit-datetime-edit {
    color: transparent;
}
input[type=date]:focus::-webkit-datetime-edit {
    color: black !important;
}

CodePudding user response：

you can remove ::-webkit-datetime-edit by adding display: none

input[type=date]::-webkit-datetime-edit {
    display: none;
}

input[type=date] {
width: 100px;
}

<input type="date" required>
<label>Birthdate</label>

CodePudding user response：

I just found what can be useful to you, also there is no way to totally delete the placeholder from a date input, because that is the format that must be follow, anyway with this you can partially hide the place holder but when it gets focused it will show again

   input[type="date"]::before {
        color: #999999;
        content: attr(placeholder);
    }
    
    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: "" !important;
    }

But if I miss understood what you wanted and you wanted to set your label as placeholder you can do this

<input required="" type="text"  placeholder="Birthdate" onfocus="(this.type='date')"/>

What this does is that it turns your input to a date input once you give it focus, hope you find it help ful