I want to change the icon on the right of a slds-select. the default looks like this:


But I would like mine to look like this:

enter image description here.

This is my code:

<lightning:select aura:id="title" value="{!v.Title__c}" class="slds-lookup__search-input slds-input--bare slds-has-divider--bottom "  name="title" label="{!v.labels.title__c+' *'}" onchange="{!c.onChange}">
 <aura:iteration items="{!v.titlePicklistValues}" var="plv">
  <option value="{!plv.value}" text="{!plv.label}" selected="{!(v.Title__c==plv.value?'true':'false')}"></option>

How do I change that selector on the right that triggers the dropdown?


4 Answers 4


You can override the SLDS CSS. This won't be the exact down arrow you have. You'll need more for that.

.THIS .slds-select_container::before { border-bottom: none;}
.THIS .slds-select_container::after { border-top: none;}
.THIS .slds-select_container .slds-select { -webkit-appearance : menuList}

.THIS .slds-select_container:before{

border-bottom: 0px!important;


Use this.

.THIS .slds-select_container::before { border-bottom: none;}
.THIS .slds-select_container::after { border-top: none;}
.THIS .slds-select_container .slds-select{
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent url("your png") no-repeat right;

This works fine for me.-webkit-appearance not supported in Firefox and Internet Explorer.

.THIS .slds-select_container:after {
    border-top: 5px solid rgb(6, 28, 63);
    bottom: calc((1.75rem / 2) - 2px);

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .