how to edit input type data with CSS

Question

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

You can't style this. You can replace it to `type=text` and use plugin such as [jquery-ui datepicker](https://jqueryui.com/datepicker/) for the calendar. — Mosh Feu, May 26 '16 at 13:48
Here is a nice codepen that shows what you can style with css. https://codepen.io/tgrant54/pen/LFblv — Mosh Feu, May 26 '16 at 13:51

BenG · Accepted Answer · 2016-05-26T13:52:58.923

1

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

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

edited May 26 '16 at 13:52

answered May 26 '16 at 13:49

BenG

14,826
5
45
60

Thanks! I will try it – Node May 26 '16 at 13:51

how to edit input type data with CSS

1 Answers1