Topic: Cannot target specific Select wrapper via CSS
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.
UNNdev pro premium priority answered 3 years ago
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
Dawid Wajszczuk staff answered 3 years ago
Hi,
Thanks for your feedback. I have added this to our ideas list and we will discuss this in our team.
Keep coding,
Dawid
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 3.8.0
- Device: All devices
- Browser: All browsers
- OS: All operating systems
- Provided sample code: No
- Provided link: No
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 pro premium 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.