更改閃電輸入中 LWC 中搜索類型的圖標位置

Question

我在我的項目中使用標准的lightning-input LWC 組件作為搜索字段。 默認情況下，它會在字段內的左側顯示搜索圖標。 我怎樣才能把這個圖標移到右邊？ 我正在使用以下代碼：

<lightning-input
            name="enter-search"
            label="Search when user hits the 'enter' key"
            type="search">
</lightning-input>

Answer 1

您需要將這些類添加到 Lightning-icon：slds-icon slds-input__icon slds-input__icon_right slds-icon-text-default。

 <div class="slds-form-element">
        <label class="slds-form-element__label" for="text-input-id-1">Input Label</label>
        <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_right">
            <lightning-icon size="x-small" class="slds-icon slds-input__icon slds-input__icon_right slds-icon-text-default" icon-name="utility:search"></lightning-icon>
            <input type="text" id="text-input-id-1" placeholder="Placeholder Text" class="slds-input" />
        </div>
    </div>

希望以上解決方案對您有所幫助。 如果是，請將其標記為最佳答案以幫助他人。

感謝和問候， Rajat Jaiswal