Поскольку Google Chrome v20 добавлен новый календарь к вводу данных. Проблема в том, что я использую javascript для создания своего собственного календаря, и у меня есть значок уже в том же положении, что и хром-стрелка по умолчанию.
Мне было интересно, как удалить фокус стрелки?
Насколько я знаю, вы не можете отключить его в данный момент. Здесь идет обсуждение: https://plus.google.com/102860501900098846931/posts/hTcMLVNKnec
Возможно, они добавят несколько селекторов -webkit для управления стилем.
Пока что вам, возможно, придется использовать <input type="text"> вместо этого.
EDIT:
Согласно ответу Джереми, теперь можно убрать кнопки со стрелками и вращением. Подробности можно найти на webkit.org: Элементы управления стилями - WebKit
CSS для скрытия элементов управления:
<input type="date" class="unstyled" />
.unstyled::-webkit-inner-spin-button,
.unstyled::-webkit-calendar-picker-indicator {
display: none;
-webkit-appearance: none;
}
Тем не менее, это только скрывает и не отключает собственный календарь! - вы все еще можете активировать календарь, нажав Alt + Down Arrow (по крайней мере, в Windows).
Чтобы отключить, вам нужно добавить немного JavaScript, как описано на странице webkit.org выше:
<input type="date" id="dateInput" class="unstyled" />
dateInput.addEventListener('keydown', function(event) {
if (event.keyIdentifier == "Down") {
event.preventDefault()
}
}, false);
Вы можете видеть, как это работает в этом jsfiddle.
Начиная с этой записи, webkit ввел элементы управления, чтобы справиться с этим:
input[type="date"]::-webkit-calendar-picker-indicator{
/* Your CSS here */
}
input[type="date"]::-webkit-inner-spin-button {
/* Your CSS here */
}
Итак, для этой конкретной проблемы это будет:
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-inner-spin-button{
display: none;
}
добавление в @jfrej: (на данный момент не могу комментировать)
Чтобы убить все эффекты, хром применяется к входу Вам также нужно очистить кнопку "x" (очистить). :: - webkit-clear-button
Чтобы предотвратить отображение текста по умолчанию. Это не местозаполнитель или ценность, которую вы можете использовать :: - WebKit-DateTime-редактировать-поля-обертка Но будьте осторожны, вы больше не видите эту ценность.
.unstyled::-webkit-clear-button {
display: none;
-webkit-appearance: none;
}
#dateInput:not([value])::-webkit-datetime-edit-fields-wrapper,
#dateInput[value=""]::-webkit-datetime-edit-fields-wrapper {
visibility: hidden;
}
Вы можете поставить это так
input[type="date"]::-webkit-calendar-picker-indicator{
background-image: url(images/calendar-icon.png);
background-position: center;
background-size: 20px 20px;
background-repeat: no-repeat;
color: rgba(204,204,204,0);
}
поместив атрибут color в 0 opacity, стрелка исчезнет
Я не думаю, что сейчас. Они работают над концепцией Shadow DOM, которая позволит вам манипулировать и стилизовать шаблоны по умолчанию. Я считаю, что он доступен в Chrome Canary, поэтому вы можете попробовать его использовать.