Span tag not moving upward when clicked on it-CodePudding

where I want span tag which is treated as an placeholder to move up when user clicks on the input form it works if I click on the form right side but it does't work when I click on the text

Codepen link

CodePudding user response：

Add an onclick JS event which changes the focus to the input element:

document.getElementById("your_input").focus()

You will have to give an id to your input field and one to the span.

document.getElementById("placeholder").addEventListener("click", function() {
    document.getElementById("mail").focus();
});

* {
  font-family: rubik;
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  display: flex;
}
.content {
  /* background-color: antiquewhite; */
  /* padding: ; */
  display: flex;
  flex-direction: column;
  gap: 50px;
  width: 50vw;
  /* height: 50vh; */
}
.insaan {
  width: 35vw;
  /* height: 50vh; */
}

h1 {
  font-size: 50px;
  color: #444;
  margin-bottom: 50px;
}

.input-mail {
  background-color: transparent;
  height: 30px;
  width: 500px;
  position: relative;
  border: none;
  border-bottom: 2px solid #222;
  outline: none;
}

/* .input-mail::placeholder {
  font-size: 25px;
} */

.inputbox {
  position: relative;
  width: 300px;
  height: 50px;
  /* margin-left: 10px; */
  margin-bottom: 50px;
}

span {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 35px;
}
.inputbox input {
  position: absolute;
  top: 0;
  left: 0;
  width: 500px;
  height: 40px;
  border: none;
  border-bottom: 2px solid #333;
  outline: none;
  background: none;
  /* padding: 10px; */
  /* border-radius: 10px; */
  font-size: 1.2em;
}
.inputbox span {
  color: #777;
  padding-bottom: 15px;
  position: absolute;
  top: 10px;
  left: 5px;
  font-size: 25px;
  transition: 0.6s;
  font-family: sans-serif;
}
.inputbox input:focus ~ span {
  transform: translateY(-55px);
  /* color: #222;
  font-size: 35px; */
  padding-bottom: 40px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700;800;900&family=Ubuntu:ital,wght@0,400;0,500;0,700;1,700&display=swap"
      rel="stylesheet"
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700;800;900&family=Rubik:wght@400;500;600;700;800&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />

    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
    <script
      type="module"
      src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"
    ></script>
    <script
      nomodule
      src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"
    ></script>
    <script
      src="https://kit.fontawesome.com/03d58ba9c7.js"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <div >
      <div >
        <h1>Create your Account</h1>
        <form action="">
          <div >
            <input type="text" id="mail"  />
            <span id="placeholder">Enter your Email</span>
          </div>
        </form>
      </div>
      <img src="insaan.png" alt=""  />
    </div>
  </body>
</html>

Found after googeling "JS Change Focus": https://www.geeksforgeeks.org/javascript-focus/