Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Remove arrow input type='date'

Tags:

html

css

input

I want to remove the right arrow from input type date. I want to let is work on mobile too.

Here is exactly want I want to remove:

enter image description here

What i've tried

<input type="date" class="unstyled" />

.unstyled::-webkit-inner-spin-button,
.unstyled::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

On desktop it doesen't appear..but on android devices appears.

like image 727
Upoings1975 Avatar asked Dec 21 '16 07:12

Upoings1975


People also ask

How do I remove the date input icon?

Right-click the Date/Time picker you want to delete. Select Cut. Exit design mode by clicking its icon again.

How do I remove the arrow in number input?

Approach 2: This approach is simple yet powerful. Using inputmode=”numeric” attribute you can find an input box without an arrow. The older browsers might not support this feature for example Internet Explorer and Safari but most of the modern browsers like Chrome, Firefox, Edge, Opera support this attribute.


3 Answers

Solution for both android and web:

.unstyled {
    -webkit-appearance: none;
}
.unstyled::-webkit-inner-spin-button,
.unstyled::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}
like image 176
pa7ryk Avatar answered Oct 16 '22 08:10

pa7ryk


Try this:

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}
like image 26
Angela Amarapala Avatar answered Oct 16 '22 09:10

Angela Amarapala


Try this

 .DatePickerInput::-webkit-inner-spin-button,
 .DatePickerInput::-webkit-calendar-picker-indicator {
     opacity:0;   
    -webkit-appearance: none;
 }
like image 20
Hiren Gabu Avatar answered Oct 16 '22 08:10

Hiren Gabu