Cannot target specific Select wrapper via CSS

Topic: Cannot target specific Select wrapper via CSS

UNNdev priority asked 3 years ago

Classes assigned to a select are not transferred to the select wrapper upon initialization. This wouldn't be a great problem if the original select was placed before the new select wrapper as you could use something like .the-original-class + .select-wrapper to target the select container. Another option would be generating the wrapper with something like data-mdb-target="#originalSelectId" if the original select has an ID.

Basically, please provide an option so the select wrapper is identifiable and can be targetted with a CSS selector.

Dawid Wajszczuk staff commented 3 years ago

Hi. Can you please provide a snippet with what you are trying to accomplish? Because every select-wrapper is generated with its own id. Thanks.

UNNdev priority commented 3 years ago

Yes, but the ID is unpredictable. I cannot write a CSS such as .select-wrapper.specific-one .form-outline::after { content: "some icon"; position: absolute; right: 2em; top: 50%; transform: translateY(-50%); } to place an icon in a specific select for example, or .select-wrapper.specific-one input { background: red; } to color it.

And since the original select comes after the wrapper in the DOM, I also cannot use something like .specific-one + .select-wrapper .form-outline::after { ... } or .specific-one + .select-wrapper input { ... }.

I can wrap the select in an own div as work-around though.

Please insert min. 15 characters.

Add comment

UNNdev priority answered 3 years ago

0 0 Best answer

I found another work-around for this problem using a custom container for each select in case one can't wrap the select itself into its own div. See https://mdbootstrap.com/snippets/standard/kayem79/3267835#css-tab-view

Add comment

Dawid Wajszczuk staff answered 3 years ago