I have below code for input text
<lightning-input label="Email" class="textInput" value={rec.Name} onchange={handleNameChange}></lightning-input>
Here I want to change the color of the label. I have tried it like this. But not working.
.textInput {
color: black;
font-weight: bold;
}
When I see the inspect element it looks like:
How should I write the css?
After spending a lot of time, the below approach got worked (which is written in connectedcallback method).
Apply input-text-align_right class name to lightning-input tag.
const inputAligncenter = document.createElement('style');
inputAligncenter .innerText = `.input-text-align_right input{ text-align: center!important; }`;
document.body.appendChild(inputAligncenter);
I tried to use div around the lightning:formattedUrl like you and it worked. Can you show your code?
<aura:component >
<div>
<lightning:formattedUrl class="blackColor" value="www.salesforce.com" />
</div>
</aura:component>
.THIS .blackColor a{
color: black !important;
}
Best Answer
On the assumption you are talking LWC rather than Aura (since you reference "lightning-input" rather than "lightning:input"), LWC specifically restricts the parent from messing with the child component's presentation via the use of Shadow DOM.
As per the lightning-input documentation, there are no exposed means to apply the styling you wish to apply. The only way to apply any form of styling is via the "variant" attribute.