[css4-ui] Styling the caret

Currently, in most visual UAs the caret is rendered as a pipe character 
with a color of either `currentColor` or `invert`. Therefore, when the 
text is low contrast, in UAs that use currentColor the caret is low 
contrast as well. When the background is close to gray (#808080), in UAs 
that use `invert`  the caret will be practically invisible. There is no 
way to modify this behavior. In Webkit, the proprietary 
-webkit-text-fill-color can be used to set the text color without 
changing the caret color, but that's an ugly single vendor hack.

A quick search around the web shows that there is high author demand for 
more control over the caret color:

http://www.quora.com/Using-CSS-how-can-I-change-the-color-of-a-text-inputs-caret-without-changing-the-color-of-the-input-text
http://stackoverflow.com/questions/684972/how-do-i-change-the-color-of-the-text-cursor-in-an-input-field-in-ie
http://stackoverflow.com/questions/2746011/html-input-cursor-color
http://stackoverflow.com/questions/5236382/change-carets-css
http://stackoverflow.com/questions/5615681/css-how-to-change-cursor-color-without-changing-text-color
http://p2p.wrox.com/css-cascading-style-sheets/45767-text-box-caret-color.html
http://www.glorum.com/view/4
http://www.tinymce.com/forum/viewtopic.php?id=369
http://boardreader.com/thread/How_to_change_TextBox_text_cursor_color_ukxnX38oqt.html
and more...

(in some of the above posters are incorrectly referring to the caret as 
"cursor", but it's obvious they mean "caret")

A complete solution for styling control over the caret would be a new 
pseudo-element. However, that would be as hard as speccing ::selection, 
if not harder.
Luckily, it appears that the most commonly asked customization is 
control over the caret color, so perhaps a new property would suffice.
Something like:

Name: caret
Value: <color> | invert
Initial: depends on user agent
Applies to: Any element that accepts textual input
Inherited: Yes
Percentages: N/A
Media: Interactive
Computed value: The computed value for 'invert' is 'invert'. For <color> 
values, the computed value is as defined for the [CSS3COLOR] 'color' 
property.

The `invert` keyword could have the same notice as it does for 
outline-color: "Conformant UAs may ignore the 'invert' value on 
platforms that do not support color inversion of the pixels on the screen."

In the future, the definition could be extended to accept other values 
(e.g. caret width or style) and become a shorthand, if there is 
sufficient demand and use cases.

Implementors, would this be possible?
Everyone, what do you think?


-- 
Lea Verou (http://lea.verou.me | @LeaVerou)

Received on Wednesday, 30 November 2011 06:58:56 UTC