Adjust datetime-local input field appearance

by Keith Henry

HTML

<input type="datetime-local">

<div></div>

CSS

input[type="datetime-local"] {
    flex:             1;
    font-family:      var(--font-main);
    border:           1px solid green;
    display:          block;
    /*width:            calc(100% - 8px);*/
    outline:          none;
    line-height:      24px;
    height:           24px;
    padding:          0px;
    font-size:        1em;
    background-color: transparent;
    color:            currentColor;
    text-shadow:      var(--text-glow);
}

div,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    mask-image:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24' %3E%3Cg%3E%3Cpath d='M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-image: none;
     background-color: red;
     mask-type: match-source; 
}

div {
    width: 300px;
    height: 300px;

}