1

Hi is there any way of removing this "or drop files" part from the lightning file upload button ? In the below screen shot i want to remove the "or drop file" section and only keep the button and functionality as such... is this possible ?

tried Using this:

.html code:

/* <div class="slds-m-around_medium">
  <lightning-input type="file" accept=".xlsx, .xls, .csv, .png, .doc, .docx, .pdf"
   onchange={openfileUpload}>
  </lightning-input>

in css file:

.THIS .slds-file-selec`enter code here`tor__dropzone .slds-file-selector__text{
display: none !important;

}

but didn't worked. is there any workaround ?

Upload button screenshot

Gon
  • 39
  • 1
  • 8

1 Answers1

1

You can't do that due to LWC Shadow DOM which ensures both CSS and Element isolation.

CSS styles defined in a parent component don’t leak into a child

You're allowed to modify only what is defined in your component. Since the element with slds-file-selector__text class is defined inside the lightning-input component you have no access and you cannot override its style.

You could create your own component without the "or drop file" part starting from the blueprint.

A standard LWC could set a CSS property using var() function, which takes two arguments: a custom identifier and an optional fallback value.
In such cases you can override LWC CSS property via Styling Hooks.

I.E.
The background-color of a lightning-badge is defined as follow:

background-color: var(--sds-c-badge-color-background,#ecebea);

Therefore you can change its background creating a custom css class that sets a value for the token --sds-c-badge-color-background

.orange-badge {
    --sds-c-badge-color-background: orange;
}

<lightning-badge label="orange" class="orange-badge"> </lightning-badge>

Here's a demo

Sadly lightning-input doesn't use var() function.

RubenDG
  • 1,365
  • 1
  • 13
  • 18
  • but in the case of a combobox, we can override the input class and change the input colour right ? by defining a style element in rendered callback, so is there any workaround for this also ? – Gon Mar 23 '22 at 07:32
  • @Gon You can override LWC CSS properties defined using `var()` via Styling Hooks. I updated the answer. Anyway there is no workaround for `lightning-input`. – RubenDG Mar 23 '22 at 09:17