我正在尝试将占位符放在输入字段的边框中

Question

我有一个 html 登录表单，我尝试实现与谷歌现在登录表单（2019-2020）相同的样式。第一张照片是没有点击的时候，第二张是点击的时候。

我尝试了以下方法，但我不喜欢结果。

<form>
  <fieldset style="padding:1px;">
    <legend style="padding:0px;">E-mailaddress or phonenumber</legend>
    <input style="width:90%;" type="text">
  </fieldset>
</form>

在官方 google 登录页面上，占位符在单击时会“滑动”到边框。如果不使用 Javascript 就无法实现这一点，那么这对我来说不是一个选择，因为我正在制作一个 CPD 门户页面。这不允许使用 JavaScript。

当输入框没有被点击时，文本不应该在边框上可见，而当输入框被点击和用户输入时，它应该是可见的。

我也试过这个：

body {
    background-color: #ccc;
}

input {
    border: 1px solid #000
    width: 200px;
    padding: 20px;
        font-size: 20px;
}


#myInput::-webkit-input-placeholder {

 border-style:solid;
border-width:medium;
}
#myInput:-moz-placeholder {
 border-style:solid;
border-width:medium;
}
#myInput:-ms-input-placeholder {
 border-style:solid;
border-width:medium;
}

<input id="myInput" type="text" placeholder="Add border to this text" />

这不是我想要实现的，当我尝试使用不同的屏幕尺寸做出响应时，in 中的文本会出现在错误的位置，并且很难放置正确。如果有人可以帮助实现我在图像中展示的内容，那就太棒了。 提前谢谢你。

Answer 1

只需移动边框中的文本并为其设置背景色！

        p {
            margin:20px 0;
            position:relative;
            display:inline-block;
        }

        label {
            padding:10px;
            pointer-events: none;
            position:absolute;
            left:0;
            top:0;
            transition: 0.2s;
            transition-timing-function: ease;
            transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
            opacity:0.5;
            background: #fff;
        }

        input {
            padding:10px;
        }

        input:focus + label, input:not(:placeholder-shown) + label {
            opacity:1;
            transform: scale(0.75) translateY(-70%) translateX(-14px);
        }

<p>
    <input placeholder=" ">
    <label>Placeholder Text</label>
</p>

我希望这是你需要的：D

Answer 2

为了将输入占位符定位在焦点上，您可以使用以下选择器：

input:focus::-webkit-input-placeholder

但是，您不能使占位符本身“跳跃”或更改位置，因为占位符并不支持所有 CSS 属性。一种可能的解决方法是使用标签，如 e.g. this answer.

虽然链接的答案不会在焦点/非焦点之间切换样式，所以我将下面的 sn-p 建立在它的基础之上：

.group {
  margin: 200px;
  position:relative;
}

#myInput:focus::-webkit-input-placeholder {
  visibility:hidden; /*hide placeholder on focus*/
}

#myInput {
  padding: 5px;
}

#myInput:focus {
  border: 1px solid dodgerblue;
  border-radius:3px;
}

#myInput-label {
  display: none;
  font-size:11px;
  color:dodgerblue;
  font-family:sans-serif;
  background-color: #fff;
  padding: 0 3px;
}



/*style of label when input is focused*/
#myInput:focus + #myInput-label  {
  display: inline-block;
  position:absolute;
  left: 12px;
  top:-5px;
}

<div class="group">
  <input id="myInput" type="text" placeholder="Add border to this text" />
  <label id="myInput-label">Add border to this text</label>
</div>