Styling the scrollbar of a scrollview

Sorry for such a simple question, but google gives me mostly results for older versions of unity which do not use the UI Builder.

I want to change the scroller low and high button and the slider width.

I see the elements in the hierarchy but they are greyed out for some reason (see image).

 

Perfect - Thank-you

 

Hi!
I was wondering how we can have several different styles for scrollers.
We want several scrollers with different looking in our game.
We can overide the default selector's styling, but it applies to all scrollers in game because they are all using the the default selector.
However, the settings are all greyed out and we can't apply our own selectors to it.
It would be awesome if anyone could help!

 

https://docs.unity3d.com/Manual/UIE-USS-Selectors.html
I'd say the descendant selector should work in your case but you need to give a name to your ScrollView

 

Hi, thank you for your reply!
It would be wonderful if you would help elaborate or share some examples.
This is what i've tried: I add the code below in my uss file


In the Builder window, I still can't apply my class to it


Then I've also tried

Code (CSharp):

1. highBtn.AddToClassList("my-scroller__high-button");

but it didn't work either.
I think I am somewhat missing some basic understanding of how it works

 

#ScrollView1 .unity-scroller__high-button {

• name of the scrollview (the point in giving it a name was to use it )
  
• space for the descendant selector
• class of the item you want to edit

If you want to modify two things, you can do this I think (I'm not sure)
#ScrollView1 .unity-scroller__high-button, #ScrollView1 .unity-scroller__low-button {

 

Thank you very much!!!
Finally I figured it out!
Say I have a Scrollview called #test-scrollview, and I want to change the style of its horizontal scroller's dragger.
I can use descendant selector ("Any descendants of the first selector, at any level, that also match the second selector.") to achieve that.
Since .unity-scroller--horizontal and .unity-base-slider__dragger are already the dragger's selector,
I can use the code below in .USS to control its style, without affecting other scrollviews' draggers in my game.

Code (CSharp):

1. #test-scrollview .unity-scroller--horizontal .unity-base-slider__dragger {
2.     width: 45%;
3.     align-self: center;
4.     background-color: rgba(159, 159, 225, 0.8);
5.     border-top-left-radius: 8px;
6.     border-bottom-left-radius: 8px;
7.     border-top-right-radius: 8px;
8.     border-bottom-right-radius: 8px;
9. }

 

Damn , the old canvas system was so much easier to use. This UI.toolkits is way more time consuming and complex to use, for marginal improvements

 

I am web developer, but USS in Unity is real nightmare to styling. It only looks like normal web elements and CSS but in reality it much harder to use, most of the time behavior of Unity VisualElements unpredictable, usual tricks from web dev are not working.

 

Yes, all my attempts to apply USS to the scroll bar failed, for example if make UP/DOWN buttons smaller, the bar is still the same size and scrollbar got gaps. Such behavior is not expected, all web components will expand and fill gaps, but not in Unity.

Not related to scroll bar behavior:
- Empty class - failed compilation. Why? Empty classes is 100% ok in CSS.
- any wrong property - will break gui. In normal CSS wrong properties just skipped and never break UI.