如何使用纯 HTML 和 CSS 在输入字段内添加标签 [关闭]答案

【问题标题】：How to add a label inside the Input field using pure HTML and CSS [closed]如何使用纯 HTML 和 CSS 在输入字段内添加标签 [关闭]
【发布时间】：2018-04-16 03:59:51
【问题描述】：

我想为输入字段添加一个标签，如附图所示。

如何使用纯 HTML 和 CSS 来做到这一点？

【问题讨论】：

参考这个stackoverflow.com/a/23352681/4428786

标签： html css input web

【解决方案1】：

试试这个，根据你的要求改变

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

【讨论】：

【解决方案2】：

也许这会有所帮助！

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

【讨论】：