Search code examples
htmlcssinputborder

How to add text on input border?


Do you know how how to create this additional "*Email" text on my input border?

It should look like this!


Solution

  • .form-group{
      border:1px solid #999;
      margin:10px;
      border-radius: 5px;
    }
    .form-group>label{
      position:absolute;
      top:-1px;
      left:25px;
      background-color:white;
      color:#666;
      padding:0 5px;
    }
    .form-group .required{
      color:red;
      padding:0 5px;
    }
    .form-group>input{
      border:none;
      border:0;
      line-height;100%;
    }
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
        <div class="form-group">
             <label><span class="required">*</span>Email</label>
             <input type="text" class="form-control input-lg" />
        </div>