Part 7—Form inputs

38 Using file button

input[type="file"] {  
  border: 1px solid #aaa;
  border-radius: 3px;
  background: lighten(YELLOWGREEN, 46%);
  padding-left: 70px;

  &::-webkit-file-upload-button {
    visibility: hidden;        
  }

  &::before {
    content: "Select Photo:";  
    margin-left: -70px;        
    padding: 1.5rem;
    @include greeny-ui;
  }
}

Reference: CSS-Tricks

License

Using file button Copyright © by makzan. All Rights Reserved.

Share This Book

Notice: 2nd edition update is work-in-progress. See update logs for details.