【HTML/CSS】ファイルアップロードボタンの実装

忍者CODE | 夜叉丸


<input type="file">で作成したボタンはクリックするとパソコンのファイルが自動で開かれるボタンを作ることができます！


HTMLのソースコード

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>ファイルアップロードボタンの実装</h1>
  <div>
    <label for="upload">ファイルを選択</label>
    <input id="upload" type="file" name="upload">
  </div>
</body>
</html>



CSSのソースコード

body {
  font-family: "Yu Gothic Medium", "游ゴシック Medium", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro";
  padding-top: 150px;
}

h1 {
  text-align: center;
}

div {
  text-align: center;
  margin-top: 50px;
}

input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

label {
  position: relative;
  background-color: #4689FF ;
  padding: 10px 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.21);
  border: solid 1px #136FFF ;
  border-radius: 100px;
  font-weight: bold;
  font-size: 18px;
  color: #fff ;
  transition: all ease-in-out 0.1s;
  cursor: pointer;
}

label:hover {
  background-color: #5a7be0 ;
}

この記事が気に入ったらサポートをしてみませんか？