Node Node - 7 months ago 41
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>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<input type="date">

Here what I want to edit

enter image description here


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