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 black arrow that appears. Need it remove it. I tried many css tricks but didn't work.

Sample code

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 black arrow that appears. Need it remove it. I tried many css tricks but didn't work.

Sample code

• javascript
• css
• html
• input
• time

• 1 Show the HTML structure could be a good start – Jerome Commented Apr 6, 2017 at 5:22
• Possible duplicate of Select removing dropdown arrow – soorapadman Commented Apr 6, 2017 at 5:31
• As you edit your post, please remove "Hello Guys", and "Any help appreciated" – Anthon Commented Apr 6, 2017 at 12:43

3 Answers 3

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; 
}

Arrows

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

Clear (x) button

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

Just Hide that Arrow

The arrow for <input type="time"> itself — which for example appears on Android — can be removed like this:

input[type="time"] {
  -webkit-appearance: none; // Hide the down arrow
}

Take Full Control

But hiding the arrow will still leave you with an issue: the input renders a blank space on the right side of the input field, and it won't react to different settings of text-align. In order to control these, you need to make further adjustments:

input[type="time"] {
  -webkit-appearance: none; // Hide the down arrow
}

// Android renders the time input as a flex box
// with a left-aligned flex element "webkit-date-and-time-value" for the value.
// It also leaves a blank space of 24px for the down arrow.
input[type="time"]::-webkit-date-and-time-value {
  margin: 0; // By default Android renders this as 1px 24px 1px 1px
  width: 100%; // Let the flex element take the full width of the input
  text-align: center; // Control your text alignment here
}