Цвет курсора в поле input и кроссбраузерность
Однажды я верстал страницу, на которой присутствовало текстовое поле поисковой формы. Ее особенность состояла в том, что фон был темно-серого цвета (с текстом белого цвета), с чем я встретился впервые за всю свою практику.
И я с удивлением обнаружил, что в большинстве браузеров курсор, стоящий в таком поле, просто-напросто не видно из-за того, что цвет самого курсора совпадает с цветом поля.
Смотрите сами:
Несмотря на то, что тексту явно задан белый цвет, курсор данному параметру почему-то не поддается. Белый курсор виден только в 3-х браузерах: FireFox 3, Safari и Chrome (проверял также в IE6, IE7, IE8b2, FireFox 2, Opera 9.6).
В связи с этим хотелось бы узнать у спецов: существует ли способ кроссбраузерного изменения цвета курсора в текстовом поле?
Случай хоть и очень редкий по моей практике, но решение не было бы лишним, если, конечно, оно вообще существует.
Смотрите также
FireFox и вертикальное выравнивание текста в input[submit]
Либо я плохо искал, либо проблема только у меня и я чего-то не знаю (в чем сомневаюсь), но в Интернете по сабжу ничего не нашел. Поэтому данный пост – это ...
Обновление CSStemplater.com (CSS Layout Generator)
На сайте CSStemplater.com, который представляет из себя генератор HTML+CSS шаблонов проведено обновление, которое включает ряд нововведений различного характера: Появилась возможность задавать произвольные параметры у прежних опций, это: ширина макета; минимальная ...
10 фиксов, решающих проблемы Internet Explorer 6
Данный пост основан на переводе интересной англоязычной статьи “10 Fixes That Solve IE6 Problems“. Информация, изложенная ниже, будет полезна как начинающим верстальщикам, там и бывалым. Зеленым цветом я пометил пункты, ...
Web 2.0 генератор шаблонов HTML + CSS
Сегодня двумя веб-разработчиками в лице меня и PHP-мастера Антона a.k.a. molodoy официально дан старт онлайн-сервису под названием “CSS Layout Generator” – генератор шаблонов HTML + CSS. Собственно, из названия сервиса ...
Комментарии (28)
Андрей с кроссом то похоже про одно и то же говорят. только не про то, что что 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;
Цвет курсора меняет свой цвет вместе с цветом шрифта иначе CSS не умеет