How Can I Create a Custom File Upload With Only HTML, JS and CSS

后端 未结 4 1784
醉话见心
醉话见心 2021-02-12 15:52

Here is the design of the control I want to create:

\"sample

As you can see, it\'s easy to create

4条回答
  •  心在旅途
    2021-02-12 16:13

    another example:

    see this Fiddle

    HTML:

    Upload File

    CSS:

    .button-green
    {
        font-family: "Segoe UI","Segoe","Verdana";
        background: #0f9e0a center top no-repeat;
        background-image: linear-gradient(rgb(15, 158, 10), rgb(24, 105, 21)); 
        overflow: hidden;
        color: white;
        border-radius: 5px;
        width: 82px;  
        position: relative; 
        padding: 8px 10px 8px 10px;
    }
    
    .button-green:hover
    {
        background: #0a8406 center top no-repeat;
        background-image: linear-gradient(rgb(12, 141, 8), rgb(19, 88, 17));     
    }
    
    .file-upload
    {
        opacity: 0;
        width: 102px;
        height: 35px;
        position: absolute;
        top: 0px;
        left: 0px;
    }
    

提交回复
热议问题