Is there a way to change the background color of the option being hovered over in a select input? I can barely see the default color being used.
Hello @tomm
Unfortunately, in Retool, it's not possible to directly customize the background color of the option being hovered over in a select input using the default settings. However, you can achieve this by using custom code.
Can you please check this request @AbbeyHernandez .
1 Like
Hey Tomm!
This is possible by changing the value of the variable used to assign the background color on hover. I like using inspect tools to do so. The first step would be to go into preview mode because class names are different in preview mode than they are in edit mode. Then inspect the page and select / identify the element you want to work with. You'll want to change the Focus element state to have :hov enabled in this case. Then search for the style selector you'd like to change. In this case it would be the background-color. There you'll be able to identify what variable is used to set the background-color on hover and can change it in the Custom Css Section of Advanced Settings. In this case I changed: * { --retool-list-box-hover-background: pink; }. You can get more specific about which elements to apply this to using selectors. Sorry if this is an over explanation, but it could be useful to others in the future. Let me know if this helps and if you have follow up questions!
1 Like
@AbbeyHernandez, you'll have to forgive my ignorance, but I'm not really sure how to go into preview mode nor how to inspect the page.
No need to apologize! To enter preview mode open your application in Retool and click the preview button (looks like a play button) on the top right hand side. That will bring you to Preview mode, which allows you to view your app as a user visiting your app will see it.
To inspect any page you can right click and select inspect or to open the Inspect mode in Google Chrome you can use a shortcut: Ctrl + Shift + C on Windows, Linux, and ChromeOS. On macOS, the shortcut is Cmd + Option + C.
1 Like
I was trying to change the hover color of the select items in my new shipping record form. I entered the following in custom CSS:
*{
--retool-base-input-input-hover-background: orange;
}
It did nothing. Am I doing something wrong?
Try using this selector for a Select dropdown.
* {
--retool-list-box-hover-background: orange;
}
1 Like
That worked @AbbeyHernandez. Thank you!
1 Like
That's fantastic news 
Happy to help!
A post was split to a new topic: Custom Css Help