CODEWITHSUNDEEP
htmlcssmaterialize
Anirudh Lou
Anirudh Lou

Reputation: 831

How to modify materialize css select option?

EDIT

I am trying to modify materialize select option's caret in such a way that that caret will go near to the horizontal line by modifying some default code, so from

.select-wrapper .caret {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
    z-index: 0;
    fill: rgba(0,0,0,0.87);
}

to 

.select-wrapper .caret {
    position: absolute;
    right: 0;
    top: 15px;
    bottom: 0;
    margin: auto 0;
    z-index: 0;
    fill: rgba(0,0,0,0.87);
}

top: 0; to top: 15px;, If i modify it on chrome inspect element, it takes effect but on my customize css file there is no effect. I wonder why?

As for the HTML: 

<div class="col s12 m8 l8">
    <select id="gender" name="gender_val">
        <option value="" disabled="" selected><< Pls select >></option>
        <option value="male">Male</option>
        <option value="female">Female</option>
    </select>
</div>

to where the div tag to be put is i really have no idea. I just saw this on the browser inspect element:

enter image description here

Here is the image of what i am referring.

enter image description here

Upvotes: 2

Views: 1026

Answers (1)

a_maldonado
a_maldonado

Reputation: 31

When you make the change in your CSS and inspect, do you see the change in the inspector? If not, it's likely that Chrome's cache is bugging you... In this case you can access in incognito mode and check if the change is displayed.

Upvotes: 2

Related Questions