Difference between revisions of "Caret"

Revision as of 22:58, 3 April 2017

In PowerUI, the caret seen in both textarea's and input elements is a virtual <caret> element. Its appearance comes from the caret selector in the user agent stylesheet and it's declared like this:

caret{
    /* Other position properties - this is the important one: */
    border-left:1px solid black;
}

Its appearance is defined as a black left border. We may remove the word 'black' in order to make it always default to the font colour in the future. Black is currently present as the default font colour for PowerUI main UI is white and a white caret is often unwanted.

Styling the caret

Often a UI will want to style a caret differently from the text. As it's a caret element, you can simply declare a caret style in your HTML like this:

caret{
    /* All of my carets will be blue */
    border-left:1px solid blue;
}

The caret acts as a direct child of your textarea or input field, so you can target specific ones using any ordinary selector too:

textarea caret{
    /* Carets in textareas will be red */
    border-left:1px solid red;
}

input caret{
    /* Carets in input fields will be white */
    border-left:1px solid white;
}

#nameField caret{
    /* The caret in an input field with the id 'nameField' will be blue */
    border-left:1px solid blue;
}