Caret - Revision history

Bablakeluke at 19:52, 17 April 2017

2017-04-17T19:52:37Z

151.229.136.200: /* Styling the caret */

2017-04-03T23:11:10Z

‎Styling the caret

151.229.136.200: /* Styling the caret */

2017-04-03T23:10:55Z

‎Styling the caret

151.229.136.200 at 23:10, 3 April 2017

2017-04-03T23:10:41Z

151.229.136.200 at 22:59, 3 April 2017

2017-04-03T22:59:31Z

151.229.136.200 at 22:58, 3 April 2017

2017-04-03T22:58:54Z

151.229.136.200: Created page with "In PowerUI, the caret seen in both textarea's and input elements is a [Virtual Elements|virtual element]. Its appearance comes from the caret selector in the [User age..."

2017-04-03T22:55:27Z

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..."

New page

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">

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

</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.

== 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:

<syntaxhighlight lang="css">
caret{
/* All of my carets will be blue */
border-left:1px solid blue;
}
</syntaxhighlight>

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

<syntaxhighlight lang="css">
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;
}
</syntaxhighlight>

@@ Line 11: / Line 11: @@
 </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 ==

← Older revision		Revision as of 23:10, 3 April 2017
Line 43:		Line 43:
	</syntaxhighlight>		</syntaxhighlight>

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

← Older revision		Revision as of 22:58, 3 April 2017
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">

@@ Line 20: / Line 20: @@
 caret{
      /* All of my carets will be blue */
-     border-left:1px solid blue;
+     border-color:blue;
+}
 </syntaxhighlight>

@@ Line 29: / Line 29: @@
 textarea caret{
      /* Carets in textareas will be red */
-     border-left:1px solid red;
+     border-color:red;
+}
 input caret{
      /* Carets in input fields will be white */
-     border-left:1px solid white;
+     border-color:white;
+}
 #nameField caret{
      /* The caret in an input field with the id 'nameField' will be blue */
-     border-left:1px solid blue;
+     border-color:blue;
+}
 </syntaxhighlight>

@@ Line 4: / Line 4: @@
 caret{
-     /* Other position properties - this is the important one: */
+     /* Other position properties removed from here */
      border-left:1px solid black;
+}
@@ Line 10: / Line 11: @@
 </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 PowerUI main UI is ''white'' and a white caret is often unwanted.
 == Styling the caret ==