Breaking News: Grepper is joining You.com. Read the official announcement!

how to customize file upload button in input element of html

Bat Affleck answered on August 10, 2023 Popularity 8/10 Helpfulness 9/10

answer how to customize file upload button in input element of html

how to customize file upload button in input element of html

Comment

Custom file input element

/* file upload button */
input[type="file"]::file-selector-button {
  border-radius: 4px;
  padding: 0 16px;
  height: 40px;
  cursor: pointer;
  background-color: white;
  border: 1px solid rgba(0, 0, 0, 0.16);
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
  margin-right: 16px;
  transition: background-color 200ms;
}

/* file upload button hover state */
input[type="file"]::file-selector-button:hover {
  background-color: #f3f4f6;
}

/* file upload button active state */
input[type="file"]::file-selector-button:active {
  background-color: #e5e7eb;
}

Popularity 8/10 Helpfulness 9/10 Language css

Source: www.viget.com

Tags: button css element file-upload html input

Link to this answer
Share Copy Link

Contributed on Aug 10 2023

Bat Affleck

0 Answers Avg Quality 2/10

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

how to customize file upload button in input element of html

Contents

More Related Answers

how to customize file upload button in input element of html

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.