如何在Google登录时将文字置于边框内？

Question

我认为今天Google更新登录 TextBox 如下所示？

当您看到边框包含文本时，这是使用 HTML 和 CSS 的最佳方式？

已更新：

StackOverflow在以下链接上已经只有一个答案：

Placing <label> text inside the border of a text input

但是我正在寻找最好的方法。

Answer 1

使用pseudo elemnt作为:before设置文本

div{
position:relative;
}
input
{
    border: 2px solid #1a73e8;
    border-radius: 4px;
    padding: 15px;
}
div:before{
    content: 'Email or phone';
    position: absolute;
    top: -9px;
    font-size: 13px;
    left: 6px;
    background: white;
    padding: 2px;
    color:#1a73e8;

}

<div>
   <input/>
</div>

以相同的方式，您可以使用<label> / <span>并将其放置在CSS中：

div{
position:relative;
}
input
{
    border: 2px solid #1a73e8;
    border-radius: 4px;
    padding: 15px;
}
label{
    position: absolute;
    top: -9px;
    font-size: 13px;
    left: 6px;
    background: white;
    padding: 2px;
    color:#1a73e8;

}

    <div>
       <label>Email or phone</label>
       <input/>
    </div>

Answer 2

也可以使用position:absolute进行标记

div
{
    position:relative;
}
input
{
    border: 1px solid #0095ff;
    border-radius: 4px;
    padding: 15px;
}
label
{
    position: absolute;
    top: -9px;
    font-size: 13px;
    left: 6px;
    background: white;
    padding: 2px;
    color:#0095ff;
}

<div>
   <label>Email or phone</label>
   <input/>
</div>

Answer 3

您可以使用字段集和最小CSS：

      fieldset { border: 2px solid cornflowerblue;}
      legend {padding: 0 10px;}
      label {visibility: hidden; position:absolute;}
      input {border: none; padding: 10px;}
      input:focus {border: 1px solid silver;}

<fieldset>
      <legend>Email or Phone</legend>
      <label for="demo">Enter your email or phone here</label>
      <input type="text" id="demo" />
</fieldset>