Удалить стрелку фона с даты ввода в Google Chrome v20

Поскольку Google Chrome v20 добавлен новый календарь к вводу данных. Проблема в том, что я использую javascript для создания своего собственного календаря, и у меня есть значок уже в том же положении, что и хром-стрелка по умолчанию.

Мне было интересно, как удалить фокус стрелки?

Ответы

Ответ 1

Насколько я знаю, вы не можете отключить его в данный момент. Здесь идет обсуждение: 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.

Ответ 2

Начиная с этой записи, 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;
}

Ответ 3

добавление в @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;
}

http://fiddle.jshell.net/RgY3t/66/

Ответ 4

Вы можете поставить это так

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, стрелка исчезнет

Ответ 5

Я не думаю, что сейчас. Они работают над концепцией Shadow DOM, которая позволит вам манипулировать и стилизовать шаблоны по умолчанию. Я считаю, что он доступен в Chrome Canary, поэтому вы можете попробовать его использовать.