Единственное, что мне нужно найти в поле, - оранжевый треугольник, и я не уверен, нужен ли мне CSS или что-то еще, чтобы избавиться от двух элементов слева от треугольника.
Есть ли способ сделать это? Я просто использую тип ввода date.
Fiddle: http://jsfiddle.net/5M2PD/1/
Используйте псевдокласс класса -webkit-inner-spin-button для его стилирования для веб-браузеров на основе веб-страниц:
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;
}
Чтобы устранить кнопку очистки, установите требуемый вход:
<input type="date" required="required" />
Чтобы удалить кнопку очистки, используйте следующую команду:
::-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;
}