How to style lightning:input of type file as lightning:button?

Question

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

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

Markup

<lightning:input type="file"
   label="File"
   multiple="false"
   name="fileupload"
   accept="image/jpeg, image/png, .zip, .doc, .docx"                                          messageWhenTypeMismatch="Please upload supported file types"
   onchange="{!c.handleFileUpload}"
   class="slds-file-selector__dropzone slds-file-selector__dropzone .slds-file-selector__text"/>

CSS:

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

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

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*/
}