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

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

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

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

Смотрите сами:

Несмотря на то, что тексту явно задан белый цвет, курсор данному параметру почему-то не поддается. Белый курсор виден только в 3-х браузерах: FireFox 3, Safari и Chrome (проверял также в IE6, IE7, IE8b2, FireFox 2, Opera 9.6).

В связи с этим хотелось бы узнать у спецов: существует ли способ кроссбраузерного изменения цвета курсора в текстовом поле?

Случай хоть и очень редкий по моей практике, но решение не было бы лишним, если, конечно, оно вообще существует.

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

  1. AFenics, IE в пролете, поэтому вариант не подходящий. Проще сменить цвет фона на более светлый, чем ради этого для IE использовать костыль, предлагаемый на webo.in.

  2. а зачем задавать такой цвет контролов, чтобы не было видно курсора, а затем это проблему решать? с точки зрения юзабилити это зло, реально лучший способ — это подсветка контрола при наведении курсора.

  3. а зачем задавать такой цвет контролов, чтобы не было видно курсора, а затем это проблему решать?

    Такой вопрос лучше задавать либо заказчику дизайна, либо дизайнеру.

  4. Мгу предложить извращенный, но реальный способ.
    На JS написать скрипт, который бы «мигал» символом «|» в конце строчки… Естесственно, этот символ будет такой же как и текст.
    Других вариантов я не вижу.

  5. Мда завал с этим IE, придется оставлять поля белыми.

  6. Может быть нарисовать курсор и при собтии mousedown перехватить событие mousemove и позиционировать курсор в обработчике mousemove соответственно координатам, которые получить из объекта event — короче текущ. коорд. курсора. ± пикселы?

  7. Вся фигня именно в этом цвете. #818 181;
    т.к. ie инвертирует курсор, а не берет его из стилией.
    Если взять похожий цвет, но чуть темнее. Курсор будет виден.
    не #818 181; а хотябы #717 171;

  8. Цвет курсора меняет свой цвет вместе с цветом шрифта иначе CSS не умеет