CODEWITHSUNDEEP
htmlcssselectmaterial-design
ajthewebdev
ajthewebdev

Reputation: 520

How to do Icon Prefixes on Select or Multi select Form elements using Material Design CSS?

How do you use 'icon prefixes' for select form elements in Material Design CSS? According the documentation,

You can add an icon prefix to make the form input label even more clear. Just add an icon with the class prefix before the input and label.

This method worked for regular input boxes, but not on <select> elements see below:

enter image description here

How do I get this to work in the <select> case?

Upvotes: 1

Views: 2142

Answers (1)

ajthewebdev
ajthewebdev

Reputation: 520

After banging my head on the wall for a while, I looked at the core css files and found this:

.input-field .prefix ~ input, .input-field .prefix ~ textarea {
    margin-left: 3rem;
    width: 92%;
    width: calc(100% - 3rem);
}

You can see from the source code that, there was no provision made for <select> form elements. To fix the issue, just add this css script to your source, and that solves the case:

.input-field .prefix ~ .select-wrapper {
  margin-left:3rem; 
  width:92%; 
  width:calc(100% - 3rem);
}

The results were as expected - enter image description here

Upvotes: 3

Related Questions