'how to move placeholder to top on focus and while typing

I am trying to implement a simple input box where when I click on the box the placeholder value moves to the top but have an issue that it always shows on top.

Here is the code
https://codesandbox.io/s/magical-glitter-7ykhm?file=/src/styles.css

htmlcssreactjs


Solution 1:[1]

An alternate way to do it is to create your own custom placeholder (a label) which is much easier to manipulate with css.

body {
  background: #111;
}

.input-wrap {
  position: relative;
  margin: 40px;
}

.input-wrap input {
  background: none;
  color: #c6c6c6;
  font-size: 18px;
  padding: 10px;
  display: block;
  width: 320px;
  border: none;
  border-bottom: 1px solid #ccc;
}

.input-wrap label {
  position: absolute;
  color: #c6c6c6;
  font-size: 16px;
  font-weight: normal;
  pointer-events: none;
  left: 10px;
  top: 10px;
  transition: 300ms ease all;
}

input:focus {
  outline: none;
}

.input-wrap input:focus~label,
.input-wrap input:valid ~ label{
  top: -14px;
  font-size: 12px;
  color: #328dd2;
}
<div class="input-wrap">
  <input required/>
  <label>Name</label>
</div>

Solution 2:[2]

Well what you currently have isn't a placeholder, did you mean doing something like this?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <form>
      <input name="AnnualIncome" type="text" placeholder="Annual Income" />
      <span class="floating_label">Annual Income</span>
      <input type="submit" />
    </form>
  </body>
</html>

Code Snippet Here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 S M

Related Questions