1

I have a register form which 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;
}
<input type="date" required>
<label>Birthdate</label>
user3425506
  • 1,285
  • 1
  • 16
  • 26
xicobski
  • 9
  • 2
  • I cannot reproduce the "overwritten" part. See: https://codepen.io/kikosoft/pen/RwJgvLW – KIKO Software Nov 14 '22 at 19:37
  • Does this answer your question? [Show placeholder text for input type date](https://stackoverflow.com/questions/30961704/show-placeholder-text-for-input-type-date) – Octávio Lage Nov 14 '22 at 19:50
  • I put your HTML and CSS into a Stackverflow snippet and it displayed properly without any overlapping issues. – user3425506 Nov 14 '22 at 21:10

2 Answers2

0

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>
nlfonseca
  • 430
  • 5
  • 10
0

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" class="form-control" 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

Edy
  • 149
  • 7