Node Node - 6 months ago 25
CSS Question

how to edit input type data with CSS

I'm trying to edit my input date, precisally the box of calendary and arrow.
Here my code:



input[type="date"] {
color: #888;
background-color: #eee;
border: 2px solid #ccc;
text-align: center;
border-radius: 10px;
width: 100%;
font-size: 14px;
font-family: 'sans-serif';
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Date</title>
</head>
<body>
<input type="date">
</body>
</html>





Here what I want to edit

enter image description here

Answer

its not possible. the browsers creates a shadow-root of the calendar which you can not style.

You have the tag added so maybe look as the jQuery Datepicker