Как изменить значок стрелки на значок календаря? [Дубликат]

В настоящее время нет перекрестного браузера, без скриптов, стиль стилизации собственного выбора даты.

Что касается того, что происходит внутри WHATWG / W3C ... Если эта функциональность появится, она, скорее всего, будет находиться под стандартом CSS-UI или некоторым Shadow DOM . На странице wiki CSS4-UI перечислены некоторые связанные с внешним видом вещи, которые были исключены из CSS3-UI, но, честно говоря, в CSS-UI, похоже, не очень большой интерес модуль.

Я думаю, что ваш лучший выбор для кросс-браузерной разработки прямо сейчас - это реализовать довольно элементы управления с помощью интерфейса на основе JavaScript, а затем отключить собственный интерфейс HTML5 и заменить его. Я думаю, что в будущем, может быть, будет улучшенный стиль управления на основе управления, но, скорее всего, будет возможность поменять собственный элемент управления для вашего собственного виджета Shadow DOM.

Досадно, что это недоступен, и ходатайство о стандартной поддержке всегда стоит того. Хотя похоже, что jQuery UI's lead попытался и не увенчался успехом .

Хотя это все очень обескураживает, стоит также рассмотреть преимущества выбора даты HTML5, а также почему пользовательские стили сложны и, возможно, их следует избегать. На некоторых платформах datepicker выглядит совершенно другим , и я лично не могу придумать какой-либо общий способ стилизации родного datepicker.

Ввод даты может быть настроен как.

<input type=date step=7 min=2014-09-08> - Monday only

- шагом 15 м

http://www.wufoo.com/html5/types/4 -date.html

Надеюсь, это поможет!

**HTML:**
    <input type="date" value="From" name="from" placeholder="From" required=""/>



**CSS**

input[type="date"]{

  background-color: red;
  outline: none;

}
input[type="date"]::-webkit-clear-button {
    font-size: 18px;
    height: 30px;
    position: relative;

  }
 input[type="date"]::-webkit-inner-spin-button {
    height: 28px;
  }

  input[type="date"]::-webkit-calendar-picker-indicator{
    font-size: 15px;


   }

нашел это на github Zurb

Если вы хотите сделать еще несколько пользовательских стилей. Вот все CSS по умолчанию для рендеринга webkit компонентов даты.

input[type="date"] {
     -webkit-align-items: center;
     display: -webkit-inline-flex;
     font-family: monospace;
     overflow: hidden;
     padding: 0;
     -webkit-padding-start: 1px;
}

input::-webkit-datetime-edit {
    -webkit-flex: 1;
    -webkit-user-modify: read-only !important;
    display: inline-block;
    min-width: 0;
    overflow: hidden;
}

input::-webkit-datetime-edit-fields-wrapper {
    -webkit-user-modify: read-only !important;
    display: inline-block;
    padding: 1px 0;
    white-space: pre;
}