如何使用纯HTML和CSS在Input字段中添加标签

Question

我想创建一个标签到输入字段，如附图所示。

如何使用纯HTML和CSS执行此操作？

Answer 1

试试这个，根据您的要求进行更改

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

也许这会有所帮助！

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;