Apex Code Development You need to sign in to do that
Don't have an account?
Ananya Dhiman change standard lightning-select icon in LWC
Hi Developers,
I am trying to change an icon which appears by default when we use 'select' means custom dropdown in LWC but unable to do so. It appears like this :
I want to hide the above standard down icon on the right position and replace it with this :
Here is the code below for COMPONENT :
<select class="c-select-menu" id="menu" onchange={doSomething}>
<option class="random" value="Make a selection">Make a selection </option>
<option class="random" value="otheroptions">< 4'10" (147cm)</option>
<option class="random" value="otheroptions">4'11" (150cm)</option>
<option class="random" value="5-0 (152cm)">5'0" (152cm)</option>
<option class="random" value="otheroptions">5'1" (155cm)</option>
<option class="random" value="otheroptions">5'2" (157cm)</option>
<option class="random" value="otheroptions">5'3" (160cm)</option>
<option class="random" value="otheroptions">5'4" (163cm)</option>
<option class="random" value="otheroptions">5'5" (165cm)</option>
<option class="random" value="otheroptions">5'6" (168cm)</option>
<option class="random" value="otheroptions">5'7" (170cm)</option>
<option class="random" value="otheroptions">5'8" (173cm)</option>
<option class="random" value="otheroptions">5'9" (175cm)</option>
<option class="random" value="otheroptions">5'10" (178cm)</option>
<option class="random" value="otheroptions">5'11" (180cm)</option>
<option class="random" value="otheroptions">6'0" (183cm)</option>
<option class="random" value="otheroptions">6'1" (185cm)</option>
<option class="random" value="otheroptions">6'2" (188cm)</option>
<option class="random" value="otheroptions">6'3" (191cm)</option>
<option class="random" value="otheroptions">> 6'4" (193cm)</option>
</select>
CSS :
.c-select-menu{
background: #fff;
position: relative;
border-radius: 0;
border: 1px solid #cfcfcf;
min-width: 300px;
margin-left: 32rem;
margin-right: 32rem;
padding-right: 2rem;
padding-left: 1rem;
height: 55px;
font-size: 17px;
font-family: sans-serif;
color: #22426d;
font-weight: 700;
cursor: pointer;
/*The below commented line is used to deplay the icon that is shown in the second image displayed above*/
/* background: transparent url("https://demo.cloudberryclient.com/lho-prediabetes/r4/assets/images/select-chevron.svg") no-repeat right; */
}
Thank you so much in advance.
Ananya Dhiman
Can you please have a look at the below link:
>> https://developer.salesforce.com/docs/component-library/bundle/lightning:buttonMenu/example#lightningcomponentdemo:exampleButtonMenuWithIcon
I hope this helps and in case if it comes handy can you please choose this as the best answer so that it can be used by others in the future if they face a similar issue.
Regards,
Anutej
Is there any specific needs that make you use pure html select element ?
You can use combobox in LWC to achieve what you need : https://developer.salesforce.com/docs/component-library/bundle/lightning-combobox/example
Best regards,
Barthélemy
Yes according to the requirement I need to html select only. And I am still not able to find an alternative for this standard icon change in both lightning combobox as well as in select.
Thanks and Regards,
Ananya