Сделать вводное значение в верхнем регистре в CSS без влияния на местозаполнитель

Есть ли способ сделать входное значение в верхнем регистре, не делая заполнитель в верхнем регистре?

Похоже, я получаю тот или иной. Я бы предпочел сделать это чисто, просто используя CSS (последнее средство JS).

enter image description here

Ответы

Ответ 1

Каждый механизм браузера имеет свою реализацию для управления стилем placeholder. Используйте следующее:

Пример jsBin.

input { 
    text-transform: uppercase;
}
::-webkit-input-placeholder { /* WebKit browsers */
    text-transform: none;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    text-transform: none;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    text-transform: none;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    text-transform: none;
}
::placeholder { /* Recent browsers */
    text-transform: none;
}

Излишне говорить, что это работает только в браузерах, которые могут обрабатывать заполнители. (IE9/10+)

Ответ 2

Я знаю, что вы сказали, что использование JS было последним средством, однако в этом случае это, вероятно, более эффективно и проще (также, если вы не используете JS, значение, отправленное в frorm submit, не будет в верхнем регистре), так что это может быть лучше без дополнительного CSS:

<input oninput="this.value = this.value.toUpperCase()" placeholder="Enter Drivers License #" />