Difference between revisions of "Caret"

Revision as of 23:10, 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 removed from here */
    /* This is the most 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-color:red;
}

input caret{
    /* Carets in input fields will be white */
    border-color:white;
}

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

As a side note, you could also use border-width to control the thickness of your caret too.