prathana dan prathana dan - 1 year ago 124
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 Source

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.


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


.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%;


Codepen Pen

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download