CODEWITHSUNDEEP
htmljquerycsscontact-form-7
Janath
Janath

Reputation: 1248

Style placeholder texts - input date tag

If we use input date tag, it will show this format.

enter image description here

I just want to hide "dd" in the date input. So I did this way. And its gone.

input::-webkit-datetime-edit-day-field{
    display: none;
}

The problem

It's showing extra dash "/" symbol there. I just want to remove that as well.

I used css first child like this and try to target first child but it's not working.

input::-webkit-datetime-edit-fields-wrapper ::-webkit-datetime-edit-text:first-child {
    display: none;
}

Any ideas for hiding this? https://jsfiddle.net/mdoty2g9/

enter image description here

Upvotes: 1

Views: 233

Answers (2)

Janath
Janath

Reputation: 1248

Finlay I found a fix my self. I hide the "/" completely. 

input::-webkit-datetime-edit-text{
 display: none;
}

Then used persudo css this way placing inside the input.

input{
 position: relative;
}

input:after {
 content: "/";
 position: absolute;
 left: 60px;
 top: 1px;
}

enter image description here

Problem solved!

Upvotes: 0

HKimhab
HKimhab

Reputation: 1

<!DOCTYPE html>
<html>
<body>

<h1>Show a Date Control</h1>

<form action="/action_page.php">
  <label for="birthday">Birthday:</label>
  <input type="date" id="birthday" name="birthday">
  <input type="submit">
</form>

<p><strong>Note:</strong> type="date" is not supported in Safari or Internet Explorer 11 (or earlier).</p>

</body>
</html>

Upvotes: -2

Related Questions