I want the functionality of lightning:input of type file but I don't want the UI as is given predefined :

enter image description here

Rather I want it to be shown as a normal button like lightning:button. How can this styling be achieved?


<lightning:input type="file"
   accept="image/jpeg, image/png, .zip, .doc, .docx"                                          messageWhenTypeMismatch="Please upload supported file types"
   class="slds-file-selector__dropzone slds-file-selector__dropzone .slds-file-selector__text"/>


.THIS .slds-file-selector__dropzone{ 
    border: none;
.THIS .slds-file-selector__dropzone .slds-file-selector__text{ 
    display: none;

1 Answer 1


Here's the HTML rendered by the lightning input file:

<div data-reactroot="" class="slds-form-element">
  <span class="slds-form-element__label" id="file-selector-id">Attachment</span>
  <div class="slds-form-element__control">
    <div class="slds-file-selector slds-file-selector_files">
      <div class="slds-file-selector__dropzone">
        <input type="file" class="slds-file-selector__input slds-assistive-text" accept="image/png" id="file-upload-input-01" aria-describedby="file-selector-id">
        <label class="slds-file-selector__body" for="file-upload-input-01">
          <span class="slds-file-selector__button slds-button slds-button_neutral">
            <svg class="slds-button__icon slds-button__icon_left" aria-hidden="true">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#upload"></use>
            </svg>Upload Files</span>
          <span class="slds-file-selector__text slds-medium-show">or Drop Files</span>

So if you want to remove the label on the right and remove the border around the button, you'll need to add some css:

.THIS .slds-file-selector__dropzone{ /*the border around*/
    border: none;
.THIS .slds-file-selector__dropzone .slds-file-selector__text{ /*the right label*/
    display: none;

EDIT: Remove the icon and overrides the text

.THIS .slds-file-selector__dropzone .slds-file-selector__button .slds-button__icon{ /*For the icon*/
    display: none;
/*To override the text, you'll need to set the size of the current text to 0 and to add some content to the before selector of the button*/
.THIS .slds-file-selector__dropzone .slds-file-selector__button{
    font-size: 0;
.THIS .slds-file-selector__dropzone .slds-file-selector__button:before{
    content: 'Your custom text';
    font-size: token(fontSizeTextXSmall); /*Default token for font size 0.75rem*/
    color: token(colorBackgroundModalBrand); /*Default token for brand color #0070d2*/
  • Thanks for the reply! I applied the styling as mentioned by you in above classes in "class" attribute of lightning:input itsel and it worked. But the upload icon and "Upload Files" standard text is still visible. I want to overwrite it too, i.e replace the whole thing with a simple button. Can you help in this? I have updated my markup
    – Sarang
    Commented Jun 26, 2017 at 8:42
  • I updated my answer. Commented Jun 26, 2017 at 10:27
  • Thanks again! Will keep a note of this CSS for future references.
    – Sarang
    Commented Jun 26, 2017 at 10:35
  • I attempted to use the edited version of this but received an error when saving the css file 'No TOKENS named markup://c:defaultTokens found'. From what I ahve read, default tokens should be available in aura css files. Does anyone know what might be causing this or a way around?
    – dannymorty
    Commented Jul 3, 2020 at 12:03
  • 1
    Hi @dannymorty, it seems that design token has changed since the answer. Could you try to use token(fontSize2) instead of token(fontSizeTextXSmall) and token(brandPrimary) instead of token(colorBackgroundModalBrand). Commented Jul 3, 2020 at 12:25

You must log in to answer this question.

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