[CSS] input type="file" 파일 선택 버튼 디자인

 

 

💡 파일 추가 버튼을 ! 디자인해보자.

 

HTML & CSS~

<input type="file">

input[type=file]::file-selector-button {
  width: 30%;
  height: 30px;
  background-color: #e0c3ae;

  font-family: 'SunBatang-Light';
  color: #784b31;
  border: none;
  border-radius: 10px;
  cursor: pointer;

  &:hover {
  transition: 0.3s;
  color: #fff;
  background-color: #b6856a;
  }
}

 

React ~

<FileInputn type="file" />

const FileInput = styled.input`
  width: 100%;
  margin: 5px 0;

  &::file-selector-button {
    width: 30%;
    height: 30px;
    background-color: #e0c3ae;

    font-family: 'SunBatang-Light';
    color: #784b31;
    border: none;
    border-radius: 10px;
    cursor: pointer;

    &:hover {
      transition: 0.3s;
      color: #fff;
      background-color: #b6856a;
    }
  }
`;

🤓