Lightning UI: apply styles to lighting select items

Question

Here is my lightning dropdown code:

<div class="slds-large-size_4-of-12 slds-grid slds-wrap">
    <div class="slds-large-size_1-of-3"></div>
    <div class="slds-large-size_1-of-3">
        <lightning:select aura:id="myDropdown" name="sortSelect" label="" value="" variant="label-hidden" class="formatDropDown">
            <option value="1" aura:id="sort-1">1</option>
            <option value="2" aura:id="sort-2">2</option>
            <option value="3" aura:id="sort-3">3</option>
            <option value="4" aura:id="sort-4">4</option>
            <option value="5" aura:id="sort-5">5</option>
        </lightning:select>
    </div>
    <div class="slds-large-size_1-of-3"></div>
</div>

Unfortunately, I'm not able to apply styles to this dropdown to include border bold black when all select options are open. Please help me with the css.

I tried applying css class to the select element but it added border around the label and the box. I would like to style the border of the box where all the values show up when click on it. Here is the css i tried:

.THIS .formatDropDown {
    border: 1px solid #000;
}

Answer 1

A lightning:select is a component atlast it creates an HTML select element only .You are applying border for lightning:select not a select element,thats why you are getting border around the label and the box.

You need to apply for select element

Example:

.THIS .formatDropDown .slds-select{
    border: 1px solid #000;
}