This is the 16th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Hi, I’m Banxia 👴, a sand sculptor who has just started writing. If you like my article, you can follow ➕ like 👍 plus my wechat: FrontendPicker, invite you to join the group, learn to communicate frontend, become a better engineer ~ follow the public number: Banxia words frontend, learn more frontend knowledge! Click me to explore a new world!

preface

Recently, when I was working on the company s official website, I came across the upload file button. This thing is really gross. Because there is no frame, in Google Chrome, this guy looks like this, it is really ugly

Because the previous use is within the framework of its own upload components, the first time their own handwriting, really is not experience!

I naively made the changes directly on the input. Finally it is the following result, do not say, the foundation is really poor!!

input[type="file"]{
color: red;
padding: 20px;
}
Copy the code

Opacity: 0;

The core of this scenario is to allow other elements to override the input. The width is consistent, and the upper and lower positions are set by z-index.

implementation

  1. Create a container with a fixed width, so that elements inherit the width of the container. To change the width, you only need to change the width of the container.
.upload-container {
position: relative;
width: 150px;
text-align: center;
}
    <div class="upload-container">
    </div>
Copy the code
  1. Define another element, here I’m using p, notice that z-index is 0.
<div class="upload-container"> <p> Upload file </p> </div>. Upload-container p {z-index: 0; width: 100%; background: #00bfff; color: #fff; padding: 10px 0; font-size: 12px; }Copy the code

  1. Input is positioned relative to the container. Note that the z-index value is 1, so that the input tag is above the P tag.
.upload-container p { z-index: 0; width: 100%; background: #00bfff; color: #fff; padding: 10px 0; font-size: 12px; } <div class="upload-container"> <p> Upload file </p> <input type="file" class="upload" /> </div>Copy the code

Can consider, z-INDE swap, how to achieve!!

Scheme 2 display: none

This scheme is easier to implement than the first scheme! Many great component libraries use this approach, as does Element for example.

The implementation idea is the same as the first one, but the style is still on top of the other elements, since display: None does not need to be considered input.

This kind of plan, at present also exists two kinds of methods, the main difference is the choice of other elements here!

Style element selection: label

<label class="input-file-button" for="upload"> </label> <input type="file" id="upload"" />. padding: 6px 25px; background: #00bfff; border-radius: 4px; color: white; cursor: pointer; } input { display: none; }Copy the code

Select lable as the style carrier, you must use the for attribute on label, associate it with input, and all that is left is to modify the style. Very simple!

Style element selection: Other elements

For example, select Button

<button id="upload-button"> click upload <input type="file" title=" upload file < 5M "id="upload-input"/> </button>Copy the code

Here again, you only need to define the style of the button, but when you click the button, there is no reaction.

This requires js support:

    let uploadbutton = document.getElementById("upload-button");
    let uploadInput = document.getElementById("upload-input");
    uploadbutton.onclick = function () {
      uploadInput.click();

    };
Copy the code

::file-selector-button

::file-selector-buttons are mainly used to change the style of inut uploads. Compatibility is also good. Because input[type=file] adds “no file selected” to the browser (depending on the browser), there is no way to get rid of this, so even with this attribute, there is still a little tail.

Of course there are ways to get rid of the tail!! The idea here is to set the color of the text to transparent, and then set the width to match the width of the button.

 input[type="file"] {
        color: transparent;
        width:80px;
      }
Copy the code

compatibility

usage

input[type="file"]::file-selector-button { font-weight: 500; color: #fff; background-color: #409eff; border-color: #409eff; Various attributes}Copy the code