Changing caret style (inside a TextField)?

Is it possible to change the caret style inside TextField? For example, making it wider and a bit more visible etc.

Using UI Toolkit Preview 12

 

Yea! In my case, for example, I have a white background and black font color. The caret is really invisible and not blinking, so it's hard to find it. Having it blink and a bit wider and in black would really help locating it quickly in a very big multiline TextField.


Would be easiest to be able to style it directly via USS, maybe some -unity-caret-type with blink/no-blink, -unity-caret-blink-speed or something in that general direction.

 

Hello, I also would like to see this feature. Specifically being able to change the caret color so we can make a dark textbox:

 

I wanted to add that I am having the same challenge. A big UI challenge that I have not been able to come up with a solution so far. Really need a built in feature to solve for this.

 

Thank you for the prompt reply @hugobd! Any chance this change can be pushed to something in 2022 or anything earlier than 2 years from now?

Could really improve adoptability of the UI for mobile apps and we could really use it!

A workaround suggestion would be very helpful too. If you can think of anything we can do.

Thank you!

 

We also have a project with a black background. And you can guess where the caret is

 

The custom style worked in 2021.2.9
thx

Another thing: can we make it blink?
It is so static...

 

I didn't think of that although it's quite obvious
I made it a bit more efficient and let it only run, when the textfield is in focus.

 

Thanks for the workaround! However it would be really nice to have this behaviour by default

 

I discoverd that when the UI is "Scaled with Screen Size" also is the caret. And since this is allways done to a full pixel, the caret is scaled to 0px width in my case. Which is not very usefull.
Is there a way to resize it?

 

Hi,

Any ETA on this one @hugobd ?

 

Hi,

I was using this solution but after upgrading to Unity 2022.2.5 it doesn't seem to work anymore. Did something change to the API?

 

Thanks for the quick reply. We upgraded from 2022.1.24 and there it was still working. I was trying a couple of things to change the cursorColor in code instead of from uss but it's not doing much. To where should I retarget the USS selector?

 

I tried the uss selector of the thread but it doesn't work. I tried several other ones and I do see it appearing in the UI Toolkit Debugger but it's not showing any difference unfortunately. I'll reproduce it in a sample model and report it as a bug.

 

Composed a script based on the advices from here, maybe will come handy to someone
It's an extended TextField with blinking caret and some properties exposed

Code (CSharp):

1. using UnityEngine.UIElements;
2.  
3. namespace LOL.UI
4. {
5.     /// <summary>
6.     /// Text field with blinking caret.
7.     /// <list type="bullet">
8.     ///     <listheader>Exposed UXML properties</listheader>
9.     ///     <item>blink-interval (in ms)</item>
10.     ///     <item>blink-enable (if true, caret blinks)</item>
11.     ///     <item>blink-style (uss style which applies to caret on blink)</item>
12.     /// </list>
13.     /// </summary>
14.     public class BlinkingTextField : TextField
15.     {
16.         private readonly IVisualElementScheduledItem _blink;
17.  
18.         private long _blinkInterval = 500;
19.         private bool _isBlinkEnabled = true;
20.         private string _blinkStyle = "cursor-transparent";
21.  
22.         /// <summary>
23.         /// Caret blink interval in ms.
24.         /// </summary>
25.         public long BlinkInterval
26.         {
27.             get => _blinkInterval;
28.             set
29.             {
30.                 _blinkInterval = value;
31.                 _blink?.Every(_blinkInterval);
32.             }
33.         }
34.  
35.         /// <summary>
36.         /// Caret uss style applied on blink.
37.         /// </summary>
38.         public string BlinkStyle { get => _blinkStyle; set => _blinkStyle = value; }
39.  
40.         /// <summary>
41.         /// If true, caret blinks.
42.         /// </summary>
43.         public bool BlinkEnable
44.         {
45.             get => _isBlinkEnabled;
46.             set
47.             {
48.                 if (_isBlinkEnabled == value)
49.                     return;
50.  
51.                 _isBlinkEnabled = value;
52.  
53.                 if (!_isBlinkEnabled)
54.                 {
55.                     if (IsFocused)
56.                         _blink?.Pause();
57.  
58.                     if (ClassListContains(_blinkStyle))
59.                         RemoveFromClassList(_blinkStyle);
60.                 }
61.                 else if (IsFocused)
62.                 {
63.                     _blink?.Resume();
64.                 }
65.             }
66.         }
67.  
68.         /// <summary>
69.         /// Returns true if active input.
70.         /// </summary>
71.         public bool IsFocused => focusController?.focusedElement == this;
72.  
73.         public BlinkingTextField()
74.         {
75.             RegisterCallback<FocusEvent>(OnFocus);
76.             RegisterCallback<BlurEvent>(OnInputEnded);
77.  
78.             _blink = schedule.Execute(() =>
79.             {
80.                 if (ClassListContains(_blinkStyle))
81.                     RemoveFromClassList(_blinkStyle);
82.                 else
83.                     AddToClassList(_blinkStyle);
84.             }).Every(_blinkInterval);
85.  
86.             _blink.Pause();
87.         }
88.  
89.         private void OnFocus(FocusEvent evt)
90.         {
91.             if (!_isBlinkEnabled)
92.                 return;
93.  
94.             _blink.Resume();
95.         }
96.  
97.         private void OnInputEnded(BlurEvent evt)
98.         {
99.             _blink.Pause();
100.         }
101.  
102.         public new class UxmlFactory : UxmlFactory<BlinkingTextField, BlinkingUxmlTraits>
103.         {
104.         }
105.  
106.         [UnityEngine.Scripting.Preserve]
107.         public class BlinkingUxmlTraits : UxmlTraits
108.         {
109.             private readonly UxmlLongAttributeDescription _blinkInterval = new() { name = "blink-interval", use = UxmlAttributeDescription.Use.Optional, defaultValue = 500 };
110.             private readonly UxmlBoolAttributeDescription _blinkEnable = new() { name = "blink-enable", use = UxmlAttributeDescription.Use.Optional, defaultValue = true };
111.             private readonly UxmlStringAttributeDescription _blinkStyle = new() { name = "blink-style", use = UxmlAttributeDescription.Use.Optional, defaultValue = "cursor-transparent" };
112.  
113.             public override void Init(VisualElement ve, IUxmlAttributes bag, CreationContext cc)
114.             {
115.                 base.Init(ve, bag, cc);
116.                 ((BlinkingTextField)ve).BlinkInterval = _blinkInterval.GetValueFromBag(bag, cc);
117.                 ((BlinkingTextField)ve).BlinkEnable = _blinkEnable.GetValueFromBag(bag, cc);
118.                 ((BlinkingTextField)ve).BlinkStyle = _blinkStyle.GetValueFromBag(bag, cc);
119.             }
120.         }
121.     }
122. }

And the styles would be:

Code (JavaScript):

1. .unity-text-field {
2.     --unity-cursor-color:#FFFFFF;
3. }
4.  
5. .cursor-transparent {
6.     --unity-cursor-color: rgba(0, 0, 0, 0);
7. }
8.  
9. .cursor-red {
10.     --unity-cursor-color: red;
11. }

 

Which Unity Version do you use?
I had something similar, but since unity 2022.2. my version did not work anymore. I think the problem was that the Textfield is only repainted, when the user types something.

 

It's 2022.3.5
hmm, never faced issues with that script yet. Not sure, sometimes it requires to postpone executions to redraw something, I had a case where I had to schedule executions one after another

 

In this version my code seams to work again

 

Just as an fyi, this was broken in 2022.2, until it was fixed in 2022.2.19, see release notes https://unity.com/releases/editor/whats-new/2022.2.19.

 

Now how do i can change caret color with 2022.3.10f1 , release note at 2022.3.10f1 has no more supported with --unity-cursor-color and textEdition.cursorColor not effective anymore

 

Adding

.unity-text-field {
--unity-cursor-color:#00FF00;
}​

to my uss file worked for me.
(Unity 2023.2.5f1)

 

Thanks this is great! Could we animate / smooth the blink in some way?