Dropdown - remove, change arrow in Perspective?

Is there a way to change, hide, or remove the down arrow on a dropdown in Perspective?

I was trying to search online with CSS methods, but unable to get anything to work. We have dropdown components in certain pages where we need all the room we can get and the arrow crowds the string values.

1 Like

Here ya go.
I got a bonus for you if you have a little more space, you can wrap the text ;p

.psc-hideDropdownIcon .iaDropdownCommon_expandIcon.ia_dropdown__expandIcon{
	display:none;
}
.psc-wrapDropdownText .ia_dropdown__valuePill__value{
	white-space:pre-wrap; 
	word-break:break-all;
}
3 Likes

Does this get injected in the background image section of a style? I will have to try this later when I'm at the computer. Thanks so much!

you can inject it, use theme.css or if you are on the newer version you have the advanced stylesheet.

Thank you, I got this working, had to wrap the injection with } { and make sure the style name is the same as what's after ".psc-"

Also I'm getting a hang of the way these style tricks with css works!

One other thing I'm curious about, can you put the hidden arrow and wrap in one injection statement? I see there is these two lines:

  1. .iaDropdownCommon_expandIcon.ia_dropdown__expandIcon
  2. .ia_dropdown__valuePill__value

What I did is just created a style class for each and can select multiple on my drop down, so that works.

Yes could put both into the same style class just, seperated by a space. And then ofc make sure the ".psc-"Name is both the same too.

}.psc-Name .iaDropdownCommon_expandIcon.ia_dropdown__expandIcon{...} .psc-Name .ia_dropdown__valuePill__value{...}{