I'm trying to use a lightning input type search to make a search bar that I will connect to a database to search throught all my items (but this is not the problem) I would like to show the search bar like the one in the photo below, but with my code i can't see the "some text center align" white and centered, can anyone help me?

what i would like to show

this is my code:

    <div class="slds-p-around_medium lgc-bg">
        <lightning-input type="search" label="some text center align" placeholder="search something"></lightning-input>


.lgc-bg { background-color: green; text-align: center;


import { LightningElement } from 'lwc';

export default class InputText extends LightningElement {}

with my code I have this result (doent't matter the shade of green):

my output:

so: how can I make the "some text center align" white and the search symbol right and not left? thank everybody in advance.

1 Answer 1


lightning- namespace'd components are limited to exposed attributes and styling hooks due to shadow DOM, you are better off creating an input component of type search, and customizing it from scratch.

You must log in to answer this question.

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