Question 167479 in Html Question posted in
Some basic documentation can be found here.

Html – put label over textfield on hover change the location css

I need to design this text field initially on page load it will be like below image
enter image description here

on hover the label will move up and color will change
enter image description here

any solution link for the same.

Thanks

Tags:

2

Answers


  1. 0

    You can check this example and adapt it for your use:
    https://css-tricks.com/float-labels-css/

    Login or Signup to reply.
  2. 0

    You can use combination of ~ and :placeholder-shown css selectors to achieve this.

    Here is an example :

    .container {
  width: 300px;
  padding: 20px;
  margin: 0 auto;
  font-family: 'Inter', sans-serif;
}

.floating-label-content {
  position: relative;
  margin-bottom: 20px;
}

.floating-label {
  color: #000;
  font-size: 13px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 15px;
  top: 11px;
  padding: 0 5px;
  background: #fff;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

.floating-input {
  font-size: 12px;
  display: block;
  width: 100%;
  height: 36px;
  padding: 0 20px;
  background: #fff;
  color: #000;
  border: 1px solid #000;
  border-radius: 4px;
  box-sizing: border-box;
}

.floating-input:focus {
  outline: none;
  border: 1px solid #3D85D8;
}

.floating-input:focus~.floating-label {
  top: -8px;
  font-size: 13px;
  color: #3D85D8;
}

.floating-input:not(:placeholder-shown) {
  color: #3D85D8;
  border: 1px solid #3D85D8;
}

.floating-input:not(:placeholder-shown)~.floating-label {
  top: -8px;
  font-size: 13px;
  color: #3D85D8;
}
    <div class="container">
  <div class="floating-label-content">
    <input class="floating-input" type="text" placeholder=" ">
    <label class="floating-label">Your Name</label>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search