Главная CSS-верстка

Цвет курсора в поле input и кроссбраузерность

Однажды я верстал страницу, на которой присутствовало текстовое поле поисковой формы. Ее особенность состояла в том, что фон был темно-серого цвета (с текстом белого цвета), с чем я встретился впервые за всю свою практику. И я с удивлением обнаружил, что в большинстве браузеров курсор, стоящий ...

Комментарии (28)

  1. как вариант, можно создать свой курсор и юзать его в текстовом поле.

  2. Присоединяюсь к вопросу. Вскопал половину русского инета, но что-то не нашел не то чтобы кроссбраузерного, а вообще хоть какого-нибудь способа с помощью css сменить цвет курсора. Вообще странно, что нет какого-нибудь параметра, типа cursor-color.

  3. Курсор не есть элемент которому можно менять цвет, курсор — иконка.

    Единственное что приходит на ум: style="cursor: url (white-text-cursor.cur);"

  4. Andrey, cross, я так полагаю, вы об одном и том же говорите. А во всех ли это браузерах работает? И такой курсор — это изображение или нет, т. е. при отключенных изображения будет ли он виден?

  5. собственно, если не грузить со страницей свой файл курсора — способов нет.

    реальный выход из ситуации — менять фон поля при получении им фокуса.

  6. Хехъ, я всегда думал, что цвет курсора будет таким же как цвет текста О_о

  7. Dimox, да, мы об одном и том же говорим.
    по идее при отключенных изображениях работать должно, ведь это не картинка, но все равно стоит проверить :)

  8. Мне кажется это проблема из ряда как изменить внешний вид чекбоксов, радиобатнов, селектов. При большом упорстве можно придумать замененние скриптом, вопрос в том насколько это необходимо… У хрома, например, поле для загрузки фала сильно отличаеться от остальных браузеров…

  9. Андрей с кроссом то похоже про одно и то же говорят. только не про то, что что Dimox. Ты ведь про текстовый курсор? А люди явно про мышиный.

  10. По-моему через CSS так сделать нельзя. Но может поможет утилита Aml Maple? Лежит тут www.amlpages.com/Rus/download.htm#amlmaple. Меняет цвет текстового курсора в зависимости от языка, может показывать флаг в мышином курсоре и в текстовом. Все настраиваемо. Пишу кстати сейчас в Opera она прекрасно и в ней прямо в этом поле ввода все это дело отображает. У меня Опера и IE, в них она прекрасно работает. Судя по скриншотам на сайте и Firefox и этот пресловутый Chrome тоже поддерживаются. Может автор Aml Maple что-то может подсказать!?! Он же в браузерах как-то меняет цвет того же самого курсора, как-то же он это вытворяет!?!

  11. Cross, а можно на аяксе сделать когда курсор входит в заданное поле — иконка курсора подгружается с другого файла?

  12. Andy, да, ты прав. Я перепутал. Спасибо, что уточнил :)
    тогда, действительно, решения лежащего не поверхности не видно. (

  13. 2Николай Громов (nicothin):

    собственно, если не грузить со страницей свой файл курсора — способов нет.

    Честно говоря, я даже не представляю, как это выглядит на практике =) Ни разу не сталкивался с применением курсоров через CSS.

    реальный выход из ситуации — менять фон поля при получении им фокуса.

    Да, судя по всему, это является самым разумным вариантом.

    2Andy:

    Андрей с кроссом то похоже про одно и то же говорят. только не про то, что что Dimox. Ты ведь про текстовый курсор? А люди явно про мышиный.

    Да, я говорю НЕ про мышиный курсор, а курсор который мигает в текстовом поле, когда в него тыкаешь курсором мыши.

    Imqer, это совсем не то, что нужно. В вашем примере другой цвет курсора видите только вы, лишь поставив программу. А нужно, чтобы цвет курсора был кроссбраузерным независимо от программного обеспечения посетителя.

  14. Ну, а если сделать через Jquery просто через Append добавлять знак | или же смещать фоновую картинку курсора в зависимости от количества введенных символов…

  15. Attlant, по-моему, Jquery — это слишком. Лучше уж тогда просто сделать цвет фона более светлым.

  16. думаю, идея с «припечатыванием» дополнительного символа в конец строчки ввода вполне благоразумная — раз другого системного решения нет. Кстати, JQuery там особо и не нужен — все можно на стандартном ДжС написать. А если к этому делу привесить таймер, то можно и мигание воспроизвести.

  17. В принципе, согласен, стандартный JavaScript можно для этого использовать. Хотя, если к сайту уже будет прикручен jQuery, то можно данную вещицу сделать и его средствами.

  18. А почему не подкладывать рисованый курсор как bacground-image для input. Ну и наверное сдвигать его яваскриптом при изменениии количества символов в поле. Хотя с отключенными картинками работать уже не будет.

  19. ATimofeev, видимо, использование JavaScript — самый подходящий вариант.

  20. Если мы загружаем изображение можно использовать data: URL, хотя я думаю он скорее всего не подойдет, вариант конечно не идеальный, IE будет как всегда лигаться и брыкаться, но и на него управа есть (подробнее об data: URL тут «webo.in»), если не поможет отпишитесь мне интересно :)