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.

you need to use label check this example it might be useful https://codepen.io/ziad-darwich/pen/qBdYQEM — Ziad Darwich, Apr 05 '20 at 14:18

Anis R. · Accepted Answer · 2020-04-05T15:06:30.600

2

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>

edited Apr 05 '20 at 15:06

answered Apr 05 '20 at 14:43

Anis R.

6,656
2
15
37

This seems to work. I do have another question though. If I add for example ```margin:200px;``` to the group class, the input field gets lowered as should, but when tapped the label still appears at the top of the page, not in the border anymore. How do I fix this? – questionman Apr 05 '20 at 14:48
Right, I should have added `position:relative` to the `group` class. Answer updated @CasparNuel – Anis R. Apr 05 '20 at 15:06
Perfect! Works like a charm and is exactly what I need. – questionman Apr 05 '20 at 15:16
Glad this helps! – Anis R. Apr 05 '20 at 15:21
Now, when I us the `````` tags for my whole body element, the label doesn't stay in the left upper corner of the tag. It falls out and stay's where it would be Without the `````` tag. How do I solve this? – questionman Apr 05 '20 at 16:03
I have a comment/question about accessibility on this answer. When an element is `display: none`, screen readers won't find the element. So when the input isn't selected, the label can't be found. But when the input is selected, then the label appears. Is that sufficient for screen readers and other devices to convey meaning to a disabled user? – JCollier Mar 18 '23 at 16:54

score 2 · Answer 2 · answered Nov 06 '20 at 09:57

Just move the text in the border and give it a background color!

        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>

i hope this is what you need :D

I like this answer the best. The animation give it a really smooth feel. The label element also is always visible, so it's good for accessibility reasons. — JCollier, Mar 18 '23 at 17:00

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

2 Answers2