Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Select] backgroundColor not forwarded to element

See original GitHub issue

Describe the bug When trying to forward backgroundColor to Select, it does not work as expected.

Expected Behavior I would expect the color to change.

To Reproduce

<Select backgroundColor="blue">
  <option>Test</option>
</Select>

** Suggested solution(s)** Workaround

const StyledSelect = styled(Select)`
    background-color: blue;
`;

I was able to get it to work by overriding the component, but I’m guessing the prop is just not getting passed to correctly. It looks like it was trying to put backgroundColor on the DOM.

Issue Analytics

State:
Created 4 years ago
Comments:12 (9 by maintainers)

Top GitHub Comments

2reactions

segunadebayocommented, Dec 4, 2019

@aaronmcadam. The Select is still the native select component, not the SingleSelect we discussed in #140.

I intend to release a patch for this issue so users can style any part of the Select.

I noticed I didn’t add it to the docs. I will do so shortly.

2reactions

segunadebayocommented, Dec 4, 2019

I’ll release an update soon.

Top Results From Across the Web

jquery - Selecting elements with a certain background color

if i understand the question correctly, the selector [attribute=value] will not work because <span> does not contain an attribute "background-color". you ...

CSS background-color not honored in disabled SELECT ...

Issue 100234: CSS background-color not honored in disabled SELECT element ... Create a SELECT element and set it's background-color to "red".

HTML DOM Style backgroundColor Property - W3Schools

The backgroundColor property sets or returns the background color of an element. ... inherit, Inherits this property from its parent element.

Overriding The Default Text Selection Color With CSS

One of those cool CSS3 declarations that you can use today is ::selection, which overrides your browser-level or system-level text highlight ...

Change a message background - Microsoft Support

Give messages a professional look when you change the default white background. Whether you select a different background color or go for more...