styling the calendar indicator for webkit

dabblet.css

html {
	background: #f06;
	background: linear-gradient(90deg, #cceecc,#eeeeee);
	min-height: 100%;
}
input[type=date] {
	background: #ccc;
	background: linear-gradient(90deg, #ddd, #ccc);
	border: 3px solid #eee;
	border-radius: 20px;
	box-shadow: 0 3px 3px rgba(0,0,0,0.1);
	color: #222;
	font: 16px Helvetica,Arial,sans-serif;
	left: 50%;
	line-height: 20px;
	margin: -15px 0 0 -100px;
	outline: 0;
	padding: 5px 10px;
	position: absolute;
	top: 50%;
	width: 200px;
}
input[type=date]::-webkit-calendar-picker-indicator {
	color: #999;
	height: 8px;
	position: relative;
	width: 8px;
	z-index: 0;

}
input[type=date]::-webkit-calendar-picker-indicator:before {
	background: #eee;
	background: linear-gradient(90deg, #eee, #fff);
	box-shadow: 0 1px 1px rgba(0,0,0,0.1);
	border-radius: 24px;
	content: '';
	display: block;
	height: 22px;
	left: -2px;
	position: absolute;
	top: -5px;
	width: 22px;
	z-index: -1;
}
input[type=date]::-webkit-calendar-picker-indicator:hover {
	background: none;
}
input[type=date]:focus {
	border-color: #3399ff;
}

dabblet.html

<input type="date">

settings.json

{"view":"split-vertical","prefixfree":"1","page":"css"}

::-webkit-calendar-picker-indicator {
  margin-right: -.35em; // @note Harmonisation avec les icônes remplacées.
  filter: invert(48%) sepia(30%) saturate(0%) hue-rotate(203deg) brightness(90%) contrast(95%); // @note Harmonisation avec les icônes remplacées @see https://stackoverflow.com/a/43960991/4960244
  cursor: pointer;
}
::-webkit-calendar-picker-indicator:hover {
  filter: invert(60%) sepia(100%) saturate(1854%) hue-rotate(3deg) brightness(107%) contrast(106%);
}