Как затемнить input при переполнении?

Question

[Евгений Самойленко]

Добрый день!

Есть такой вопрос - как затемнить конец input, если в него вписали длинную строку и уже не помещается? Т.е. чтобы не передвигалась строка.

Не могу это правильно загуглить, не нахожу ответа. Вот и обращаюсь к вам:)

Comments

[Андрей Солдатов]

Как вы себе представляете "затемненный конец input"?

[Евгений Самойленко]

Вот например у нас есть поле для ввода email.
Пользователь вводит длинный емейл(нет задачи ограничить длинну емейла)
Задача - затемнить конец input.
скриншот из макета -
https://www.dropbox.com/s/4tziicq7zswv7lo/%D0%B8%D...

[Юрий Лобанов]

@samoilenkoevgeniy ну так что, куда пропали?

Answer 1

[Юрий Лобанов]

jsfiddle.net/iiil/LUL8a/2

Comments

[Виталий Желтяков]

Классная, кстати, идея!

Answer 2

[Виктор Виктор]

Может так?

Answer 3

[Ivan Naumov]

Ты об этом?

Answer 4

[Владимир Глушков]

Как вариант - ограничить ширину input и добавить overflow: hidden. А затемнение можно запилить через псевдоэлемент :after
Что-то типа input:after {тут стили для градиента или картинки}

Comments

[Евгений Самойленко]

Вопрос уже решен, но все равно спасибо:)

Answer 5

[Виталий Желтяков]

А не проще поменять целиком цвет input-а, как все делают?

Answer 6

[benderskiy]

С тем, чтобы не перемещалась строка вам поможет атрибут maxlength htmlbook.ru/html/input/maxlength

Что должно затемняться и как не очень понятно из вопроса

Answer 7

[TekVanDo]

Ну мне на ум такое приходит codepen.io/Tek/pen/bntsD (извиняюсь за кривую верстку хреново верстаю) если красному диву градиент задать или кусок картинки бэкграундом поставить, выйдет примерно то что вы хотите .