如何修改实现CSS选择选项？

Question

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:

Here is the image of what i am referring.

Answer 1

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.