Как стилизовать тип ввода "время"
Я пытаюсь найти источник, объясняющий, как полностью стилизовать тип ввода «время». Я не могу найти ни одного примера, объясняющего все атрибуты стиля!
Я нашел только одно:
input[type = "time"]{
/**style goes here **/
}
Что не очень помогает ..
Пробовал это:
input[type = "time"]::-webkit-inner-spin-button {
-webkit-appearance: none;
cursor:pointer;
display: block;
width:20px;
color: red;
text-align:center;
position:relative;
}
Спиннер, например, не становится красным.
@ j08691 Я ничего не могу попробовать, потому что не знаю, с чего начать! (Я хотел бы стилизовать ВСЕ с помощью кнопки, наведения, при нажатии, счетчика, кнопки очистки и т. д.)
Я думаю, что такой элемент (например, элемент select) не предназначен для использования в стилях и обрабатывается браузером.
Ответы 3
Я добился некоторого прогресса в стилизации ввода в Chrome / webkit, но я не могу понять, как стилизовать что-либо в Firefox. Вот демонстрация, который я собрал на Codepen.
input[type=time] {
border: none;
color: #2a2c2d;
font-size: 14px;
font-family: helvetica;
width: 180px;
}
/* Wrapper around the hour, minute, second, and am/pm fields as well as
the up and down buttons and the 'X' button */
input[type=time]::-webkit-datetime-edit-fields-wrapper {
display: flex;
}
/* The space between the fields - between hour and minute, the minute and
second, second and am/pm */
input[type=time]::-webkit-datetime-edit-text {
padding: 19px 4px;
}
/* The naming convention for the hour, minute, second, and am/pm field is
`-webkit-datetime-edit-{field}-field` */
/* Hour */
input[type=time]::-webkit-datetime-edit-hour-field {
background-color: #f2f4f5;
border-radius: 15%;
padding: 19px 13px;
}
/* Minute */
input[type=time]::-webkit-datetime-edit-minute-field {
background-color: #f2f4f5;
border-radius: 15%;
padding: 19px 13px;
}
/* AM/PM */
input[type=time]::-webkit-datetime-edit-ampm-field {
background-color: #7155d3;
border-radius: 15%;
color: #fff;
padding: 19px 13px;
}
/* 'X' button for resetting/clearing time */
input[type=time]::-webkit-clear-button {
display: none;
}
/* Up/Down arrows for incrementing/decrementing the value */
input[type=time]::-webkit-inner-spin-button {
display: none;
}<input type = "time" value = "13:30"/>Мне нигде не удалось найти документацию. Я дошел до этого, проверив внутреннюю DOM ввода, наведя курсор на каждый элемент в devTools, чтобы увидеть, какой части пользовательского интерфейса он соответствует, а затем взял его атрибут pseudo.
Если в настоящее время вы не видите внутреннюю модель DOM, вам придется открыть ее, зайдя в настройки, настройки, элементы Chrome DevTools и убедитесь, что опция «Показать теневую модель DOM пользовательского агента» включена.
Есть еще один псевдоэлемент: -webkit-calendar-picker-indicator - часы, которые отображаются в хроме, чтобы вы могли выбирать время с помощью мыши.
input[type = "time"]::-webkit-calendar-picker-indicator {
filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg);
}<input type = "time">привет, как я могу создать что-то из этого, но фон из черного значка и белого значка
Чтобы стилизовать тип ввода date и time - используйте следующий css -
[type = "date"] {
background:transparent url(/assets/images/calendar.png) 97% 50% no-repeat !important;
}
[type = "date"]::-webkit-inner-spin-button {
display: none;
}
[type = "date"]::-webkit-calendar-picker-indicator {
opacity: 0;
}
[type = "time"] {
background:transparent url(/assets/images/clock.png) 97% 50% no-repeat !important;
}
[type = "time"]::-webkit-inner-spin-button {
display: none;
}
[type = "time"]::-webkit-calendar-picker-indicator {
opacity: 0;
}
Если вы ищете ресурс не по теме. Вместо этого объясните, какой стиль вы пытаетесь сделать, что вы пробовали, а что не работает.