How to add a label inside the Input field using pure HTML and CSS

Question

I want to create add a label to the input field as shown in the attached image.

How do I do this using pure HTML and CSS?

Answer 1

Try this, change according to your requirement

.input-group{
position:relative;width:100%;overflow:hidden;
}
.input-group input{position:relative;height:45px;border-radius:30px;min-width:500px;box-shadow:none;border:1px solid #eaeaea;padding-left:160px;}
.input-group label{position:absolute;left:0;height:48px;background:#55ccf2;padding:0px 25px;border-radius:30px;line-height:48px;font-size:18px;color:#fff;top:0;width:100px;font-weight:100;}

<div  class="input-group">
<input type="text">
<label>Some Text</label>
</div>

Answer 2

Maybe this will help!

* {
  margin: 0;
  padding: 0;
}

input {
  padding: 10px 10px 10px 30px;
  width: 200px;
  border: solid 1px lightgray;
  border-radius: 20px;
}

label {
  background-color: lightblue;
  padding: 9px;
  border-radius: 20px;
  color: white;
  margin-right: -30px;
  z-index: 999999;
  position: relative;
}

<div>
  <label>First and last name</label>
  <input type="text">
</div>