prathana dan prathana dan - 1 month ago 14
CSS Question

How to create bootstrap labels like this?

enter image description here

I wanted to create input like this. When you click the label, a violet line appears. When you click on the success input, green line appears below the label. When you click on the error line input, red line appears below the input.

i want to create using html and css

Answer

There is a way you can do this with pure HTML and CSS.

Maybe you can even optimize the code but I wanted to give you a quick idea.

HTML

<div class="wrapper">
  <input id="name" type="text" placeholder="Username" />
  <label for="name"></label>
</div>

CSS

.wrapper {
  position: relative;
  width: 200px;
}

input {
  width: 100%;
  background: none;
  padding: 10px;
  border: none;
  outline: none;
  margin-top: 10px;
}

label {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(0, 0, 0, 0.4);
}

label:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: rgba(0, 0, 0, 0.8);
  transition: 0.4s;
}

input:focus ~ label:after {
  width: 100%;
}

Demo

Codepen Pen

Comments