Page MenuHomePhabricator

Give some color to the caret in text fields
Closed, DeclinedPublic


Firefox and Chrome now support the caret-color CSS property. I think it would be a nice touch to paint it blue, for example (I tweaked my global.css with caret-color: #36c, a color from M82, and boy, it looks ace!).

More info on the new feature:

I think it would be a great addition even if at the present time there is limited browser support, because it fits the philosophy of “progressive enhancement” IMO.

Event Timeline

@Fito What would be the advantage from coloring it in your opinion?

@Volker_E: Mere aesthetic value? That was why I suggested this, of course. I was thinking that the caret could be made to match the color of the focus frame drawn when you click a text field, e.g., when you log into a wiki.

I think there may be a case to use it to increase contrast values between the text colour and the carat. This could increase the usability for colour-blind people.

Also, if you're editing a large body of text, having the carat be a different colour could help in locating it whilst looking around and editing.

Volker_E closed this task as Declined.EditedFeb 7 2017, 8:36 PM

Although I like the idea of using Accent50 of our color palette M82 as indicator for interaction bound elements, we also have to take into consideration user expectations and applicability. All major word processing software GUIs and generally text editing inputs are using a black, blinking caret.
Given this and the inclining, but still not fully-spread browser support, I change this to currently "declined".
We might revisit this.

Will you consider mobile usage? For example, WhatsApp uses a colored caret. With this, I don’t believe that users will be freaked out by a colored caret.