Difference between revisions of "Caret"

From PowerUI
Jump to: navigation, search
(Created page with "In PowerUI, the caret seen in both textarea's and input elements is a [Virtual Elements|virtual <caret> element]. Its appearance comes from the caret selector in the [User age...")
 
 
(5 intermediate revisions by one other user not shown)
Line 1: Line 1:
In PowerUI, the caret seen in both textarea's and input elements is a [Virtual Elements|virtual <caret> element]. Its appearance comes from the caret selector in the [User agent stylesheet|user agent stylesheet] and it's declared like this:
+
In PowerUI, the caret seen in both textarea's and input elements is a [[Virtual Elements|virtual <caret> element]]. Its appearance comes from the caret selector in the [[User agent stylesheet|user agent stylesheet]] and it's declared like this:
  
 
<syntaxhighlight lang="css">
 
<syntaxhighlight lang="css">
  
 
caret{
 
caret{
     /* Other position properties - this is the important one: */
+
     /* Other position properties removed from here */
 +
    /* This is the most important one: */
 
     border-left:1px solid black;
 
     border-left:1px solid black;
 
}
 
}
Line 10: Line 11:
 
</syntaxhighlight>
 
</syntaxhighlight>
  
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.
+
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 the PowerUI main UI is ''white'' and a white caret is often unwanted.
  
 
== Styling the caret ==
 
== Styling the caret ==
Line 19: Line 20:
 
caret{
 
caret{
 
     /* All of my carets will be blue */
 
     /* All of my carets will be blue */
     border-left:1px solid blue;
+
     border-color:blue;
 
}
 
}
 
</syntaxhighlight>
 
</syntaxhighlight>
Line 28: Line 29:
 
textarea caret{
 
textarea caret{
 
     /* Carets in textareas will be red */
 
     /* Carets in textareas will be red */
     border-left:1px solid red;
+
     border-color:red;
 
}
 
}
  
 
input caret{
 
input caret{
 
     /* Carets in input fields will be white */
 
     /* Carets in input fields will be white */
     border-left:1px solid white;
+
     border-color:white;
 
}
 
}
  
 
#nameField caret{
 
#nameField caret{
 
     /* The caret in an input field with the id 'nameField' will be blue */
 
     /* The caret in an input field with the id 'nameField' will be blue */
     border-left:1px solid blue;
+
     border-color:blue;
 
}
 
}
 
</syntaxhighlight>
 
</syntaxhighlight>
 +
 +
You could also use border-width to control the thickness of your caret too.

Latest revision as of 19:52, 17 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 the 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-color: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;
}

You could also use border-width to control the thickness of your caret too.