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

Question

我有一个 html 登录表单，我尝试在他们的登录表单 (2019-2020) 中实现相同的样式 google。第一张照片是没有点击的时候，第二张照片是点击的时候。

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

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

在官方google登录页面上，占位符"slides"被点击到边框。如果我不使用 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

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

input:focus::-webkit-input-placeholder

但是，您不能使占位符本身 "jump" 或更改位置，因为并非所有 CSS 属性都在占位符上受支持。一种可能的解决方法是使用标签，如在例如.

不过，链接的答案不会在 focus/unfocus 之间切换样式，所以我基于下面的代码片段并在其之上构建：

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

Answer 2

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

        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

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

I'm trying to place the placeholder in the border of the input field

html

css

forms

styles

input