Remove the arrow that appears for input type=“time” for HTML5

Question

I am using the default HTML5 sample line of code: I have used a custom background. I want to remove the black arrow that appears on the right.

The image shows a bl

Answer 1

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}

or

/* Hide the cancel button */
::-webkit-search-cancel-button { 
    -webkit-appearance: none; 
}

/* Hide the magnifying glass */
::-webkit-search-results-button {
     -webkit-appearance: none; 
}

/* Remove the rounded corners */
input[type=search] { 
    -webkit-appearance: none; 
}

Answer 2

Arrows

input[type="time"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

Clear (x) button

input[type="time"]::-webkit-clear-button {
  -webkit-appearance: none;
}