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

Question

I have a html login form and I try achieve the same style google has now in their login forms (2019-2020). First photo is when not clicked, second photo is when clicked.

I've tried the following approach, but I don't like the result.

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

On the official google login page, the placeholder "slides" to the border when clicked. If I can't achieve this without using Javascript, than this is not an option for me, as I'm making a CPD portal page. This does not allow JavaScript.

The text should not be visible on the border when the input field is not clicked, and it should be visible when the input field is clicked and when the user is typing.

I've also tried this:

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" />

This is not exactly what I'd like to achieve, and when I try to make this responsive with diffrent screen sizes the text in the border gets on the wrong places and it's difficult to place it correctly. If anyone could help achieve what I show in the images, that would be amazing. Thank you in advance.

Answer 1

In order to target the input placeholder on focus, you can use the following selector:

input:focus::-webkit-input-placeholder

However, you cannot make the placeholder itself "jump" or change position, as not all CSS properties are supported on placeholders. A possible workaround is to use a label, as explained in e.g. this answer.

The answer linked does not toggle styling between focus/unfocus though, so I based the below snippet on it and built on top:

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