Как избавиться от элементов со стрелкой вверх и вниз по дате ввода?

enter image description here

Единственное, что мне нужно найти в поле, - оранжевый треугольник, и я не уверен, нужен ли мне CSS или что-то еще, чтобы избавиться от двух элементов слева от треугольника.

Есть ли способ сделать это? Я просто использую тип ввода date.

Fiddle: http://jsfiddle.net/5M2PD/1/

Ответы

Ответ 1

Используйте псевдокласс класса -webkit-inner-spin-button для его стилирования для веб-браузеров на основе веб-страниц:

 

http://jsfiddle.net/5M2PD/2/

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

Если вы хотите изменить стиль стрелки вниз, используйте псевдокласс -webkit-calendar-picker-indicator:

input[type=date]::-webkit-calendar-picker-indicator {
    -webkit-appearance: none;
    display: none;
}

Чтобы устранить кнопку очистки, установите требуемый вход:

http://jsfiddle.net/5M2PD/3/

<input type="date" required="required" />

Ответ 2

Чтобы удалить кнопку очистки, используйте следующую команду:

::-webkit-clear-button
{
    display: none; /* Hide the button */
    -webkit-appearance: none; /* turn off default browser styling */
}

В качестве дополнительной заметки, чтобы сделать это в IE10 + (источник), используйте это:

::-ms-clear { }

Обратите внимание, что это работает на <input type="text" />, так как IE теперь также устанавливает четкую кнопку.

Чтобы стиль остальной части управления датой в браузерах WebKit, я бы рекомендовал взглянуть на эту ссылку. Чтобы подвести итог, вы можете играть со следующими псевдоклассами:

::-webkit-datetime-edit { }
::-webkit-datetime-edit-fields-wrapper { }
::-webkit-datetime-edit-text { }
::-webkit-datetime-edit-month-field { }
::-webkit-datetime-edit-day-field { }
::-webkit-datetime-edit-year-field { }
::-webkit-inner-spin-button { }
::-webkit-calendar-picker-indicator { }

Я также настоятельно рекомендую использовать следующее, чтобы отключить стили браузера по умолчанию; Я нашел, что это особенно полезно при работе с мобильными браузерами:

input[type="date"]
{
    -webkit-appearance: none;
}