Цвет курсора в поле input и кроссбраузерность
Однажды я верстал страницу, на которой присутствовало текстовое поле поисковой формы. Ее особенность состояла в том, что фон был темно-серого цвета (с текстом белого цвета), с чем я встретился впервые за всю свою практику.
И я с удивлением обнаружил, что в большинстве браузеров курсор, стоящий в таком поле, просто-напросто не видно из-за того, что цвет самого курсора совпадает с цветом поля.
Смотрите сами:
Несмотря на то, что тексту явно задан белый цвет, курсор данному параметру почему-то не поддается. Белый курсор виден только в 3-х браузерах: FireFox 3, Safari и Chrome (проверял также в IE6, IE7, IE8b2, FireFox 2, Opera 9.6).
В связи с этим хотелось бы узнать у спецов: существует ли способ кроссбраузерного изменения цвета курсора в текстовом поле?
Случай хоть и очень редкий по моей практике, но решение не было бы лишним, если, конечно, оно вообще существует.
как вариант, можно создать свой курсор и юзать его в текстовом поле.
Присоединяюсь к вопросу. Вскопал половину русского инета, но что-то не нашел не то чтобы кроссбраузерного, а вообще хоть какого-нибудь способа с помощью css сменить цвет курсора. Вообще странно, что нет какого-нибудь параметра, типа cursor-color ..
Курсор не есть элемент которому можно менять цвет, курсор - иконка.
Единственное что приходит на ум: style=”cursor: url(white-text-cursor.cur);”
Andrey, cross, я так полагаю, вы об одном и том же говорите. А во всех ли это браузерах работает? И такой курсор - это изображение или нет, т.е. при отключенных изображения будет ли он виден?
собственно, если не грузить со страницей свой файл курсора - способов нет.
реальный выход из ситуации - менять фон поля при получении им фокуса.
Хехъ, я всегда думал, что цвет курсора будет таким же как цвет текста О_о
Dimox, да, мы об одном и том же говорим.
по идее при отключенных изображениях работать должно, ведь это не картинка, но все равно стоит проверить :)
Мне кажется это проблема из ряда как изменить внешний вид чекбоксов, радиобатнов, селектов. При большом упорстве можно придумать замененние скриптом, вопрос в том насколько это необходимо… У хрома, например, поле для загрузки фала сильно отличаеться от остальных браузеров…
Андрей с кроссом то похоже про одно и то же говорят. только не про то, что что Dimox. Ты ведь про текстовый курсор? А люди явно про мышиный.
По-моему через CSS так сделать нельзя. Но может поможет утилита Aml Maple? Лежит тут http://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”), если не поможет отпишитесь мне интересно :)
AFenics, IE в пролете, поэтому вариант не подходящий. Проще сменить цвет фона на более светлый, чем ради этого для IE использовать костыль, предлагаемый на webo.in.
а зачем задавать такой цвет контролов, чтобы не было видно курсора, а затем это проблему решать? с точки зрения юзабилити это зло, реально лучший способ - это подсветка контрола при наведении курсора.
Такой вопрос лучше задавать либо заказчику дизайна, либо дизайнеру.
Мгу предложить извращенный, но реальный способ.
На JS написать скрипт, который бы “мигал” символом “|” в конце строчки… Естесственно, этот символ будет такой же как и текст.
Других вариантов я не вижу.
Мда завал с этим IE, придется оставлять поля белыми.
Может быть нарисовать курсор и при собтии mousedown перехватить событие mousemove и позиционировать курсор в обработчике mousemove соответственно координатам, которые получить из объекта event - короче текущ. коорд. курсора. +- пикселы?
Вся фигня именно в этом цвете. #818181;
т.к. ie инвертирует курсор, а не берет его из стилией.
Если взять похожий цвет, но чуть темнее. Курсор будет виден.
не #818181; а хотябы #717171;