Цвет курсора в поле input и кроссбраузерность
Однажды я верстал страницу, на которой присутствовало текстовое поле поисковой формы. Ее особенность состояла в том, что фон был темно-серого цвета (с текстом белого цвета), с чем я встретился впервые за всю свою практику. И я с удивлением обнаружил, что в большинстве браузеров курсор, стоящий ...
Комментарии (28)
как вариант, можно создать свой курсор и юзать его в текстовом поле.
Присоединяюсь к вопросу. Вскопал половину русского инета, но что-то не нашел не то чтобы кроссбраузерного, а вообще хоть какого-нибудь способа с помощью css сменить цвет курсора. Вообще странно, что нет какого-нибудь параметра, типа cursor-color.
Курсор не есть элемент которому можно менять цвет, курсор — иконка.
Единственное что приходит на ум: style="cursor: url (white-text-cursor.cur);"
Andrey, cross, я так полагаю, вы об одном и том же говорите. А во всех ли это браузерах работает? И такой курсор — это изображение или нет,т. е. при отключенных изображения будет ли он виден?
собственно, если не грузить со страницей свой файл курсора — способов нет.
реальный выход из ситуации — менять фон поля при получении им фокуса.
Хехъ, я всегда думал, что цвет курсора будет таким же как цвет текста О_о
Dimox, да, мы об одном и том же говорим.
по идее при отключенных изображениях работать должно, ведь это не картинка, но все равно стоит проверить :)
Мне кажется это проблема из ряда как изменить внешний вид чекбоксов, радиобатнов, селектов. При большом упорстве можно придумать замененние скриптом, вопрос в том насколько это необходимо… У хрома, например, поле для загрузки фала сильно отличаеться от остальных браузеров…
Андрей с кроссом то похоже про одно и то же говорят. только не про то, что что Dimox. Ты ведь про текстовый курсор? А люди явно про мышиный.
По-моему через CSS так сделать нельзя. Но может поможет утилита Aml Maple? Лежит тут www.amlpages.com/Rus/download.htm#amlmaple. Меняет цвет текстового курсора в зависимости от языка, может показывать флаг в мышином курсоре и в текстовом. Все настраиваемо. Пишу кстати сейчас в Opera она прекрасно и в ней прямо в этом поле ввода все это дело отображает. У меня Опера и IE, в них она прекрасно работает. Судя по скриншотам на сайте и Firefox и этот пресловутый Chrome тоже поддерживаются. Может автор Aml Maple что-то может подсказать!?! Он же в браузерах как-то меняет цвет того же самого курсора, как-то же он это вытворяет!?!
Cross, а можно на аяксе сделать когда курсор входит в заданное поле — иконка курсора подгружается с другого файла?
Andy, да, ты прав. Я перепутал. Спасибо, что уточнил :)
тогда, действительно, решения лежащего не поверхности не видно. (
2Николай Громов (nicothin):
Честно говоря, я даже не представляю, как это выглядит на практике =) Ни разу не сталкивался с применением курсоров через CSS.
Да, судя по всему, это является самым разумным вариантом.
2Andy:
Да, я говорю НЕ про мышиный курсор, а курсор который мигает в текстовом поле, когда в него тыкаешь курсором мыши.
Imqer, это совсем не то, что нужно. В вашем примере другой цвет курсора видите только вы, лишь поставив программу. А нужно, чтобы цвет курсора был кроссбраузерным независимо от программного обеспечения посетителя.
Ну, а если сделать через Jquery просто через Append добавлять знак | или же смещать фоновую картинку курсора в зависимости от количества введенных символов…
Attlant, по-моему, Jquery — это слишком. Лучше уж тогда просто сделать цвет фона более светлым.
думаю, идея с «припечатыванием» дополнительного символа в конец строчки ввода вполне благоразумная — раз другого системного решения нет. Кстати, JQuery там особо и не нужен — все можно на стандартном ДжС написать. А если к этому делу привесить таймер, то можно и мигание воспроизвести.
В принципе, согласен, стандартный JavaScript можно для этого использовать. Хотя, если к сайту уже будет прикручен jQuery, то можно данную вещицу сделать и его средствами.
А почему не подкладывать рисованый курсор как bacground-image для input. Ну и наверное сдвигать его яваскриптом при изменениии количества символов в поле. Хотя с отключенными картинками работать уже не будет.
ATimofeev, видимо, использование JavaScript — самый подходящий вариант.
Если мы загружаем изображение можно использовать data: URL, хотя я думаю он скорее всего не подойдет, вариант конечно не идеальный, IE будет как всегда лигаться и брыкаться, но и на него управа есть (подробнее об data: URL тут «webo.in»), если не поможет отпишитесь мне интересно :)