CODEWITHSUNDEEP
javascriptcsshtmlinputtime
Ravee S Gohiel
Ravee S Gohiel

Reputation: 79

Remove the arrow that appears for input type="time" for HTML5

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

Upvotes: 6

Views: 7275

Answers (3)

Robert
Robert

Reputation: 1946

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
}

Upvotes: 1

yousef
yousef

Reputation: 1362

Arrows

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

Clear (x) button

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

Upvotes: 2

user7821182
user7821182

Reputation: 

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

Upvotes: 10

Related Questions