Search input bar layout

Question

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?

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>
    </div>

CSS:

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

JS:

import { LightningElement } from 'lwc';

export default class InputText extends LightningElement {}

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

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

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.