how to edit input type data with CSS [duplicate]

Tags: javascript,jquery,html,css,input

Problem :

This question already has an answer here:

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

Solution :

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

    CSS Howto..

    How is `outline: inherit 0` interpreted?

    How to create hover effects for all links EXCEPT the one you hover on using javascript/jquery/css?

    How can I create the behavior of a two-frame horizontal-tiled frameset with divs/css?

    Bootstrap How to make a responsive grid degradating in two steps?

    How to design select box using css

    CSS column header with img - how to dock img/div to the right?

    How to use CSS Background-size: cover; but leave space for menu?

    How to match element containing another element?

    How to create a tiled background button using CSS

    How prevent Conflict between two $(this) in jquery?

    Materialize CSS Showing errors on form fields

    How can I turn off hardware acceleration for certain HTML elements via CSS?

    How to position the GWT dialog to the bottom right corner of the browser?

    How to create icons like font awesome

    CSS: how to center a list with image

    How to make a collapsible with a single css drop shadow in Jquery mobile?

    How do I go from fixed width to percentage width in a CSS stylesheet?

    How to preserve sibling element position when one sibling is absolutely positioned?

    How to fluid images when resize window?

    how to draw a configurable pie chart in css

    CSS How to get rid of border that appears around custom button on and after click

    How to change when Jquery edits my CSS upon reaching an anchor point?

    How to make sure that different severity Toasters are shown differently?

    php search result images show across and fill a CSS div

    How to select text, but not images, in CSS

    How do I make this CSS work to have semi-transparent border?

    How to get this hover effect with just CSS

    Can't Figure Out How to Fix CSS Width

    How to style HTML select option hover and selected option effects

    How to get resultant HTML after executing all scripts?