Ich versuche, den Platzhalter an der Grenze des Eingabefeldes zu platzieren ⇐ CSS

[Anonymous]

Ich habe ein HTML-Anmeldeformular und ich versuche, denselben Stil zu erreichen, den Google jetzt in den Anmeldesformularen (2019-2020) hat. Das erste Foto ist, wenn nicht geklickt wird, das zweite Foto ist beim Klicken. src = "https://i.static.net/q5bsc.png" /> < /p>

Ich habe den folgenden Ansatz ausprobiert, aber ich mag das Ergebnis nicht. Lang-html PrettyPrint-Override ">

E-mailaddress or phonenumber


< /code>
< /div>
< /div>
< /p>

Auf der offiziellen Google -Anmeldeseite, die Platzhalter "rutscht" zum Grenze, wenn er klickt. Wenn ich dies nicht erreichen kann, ohne JavaScript zu verwenden, ist dies keine Option für mich, da ich eine CPD -Portalseite erstelle. Dieser erlaubt JavaScript nicht < /strong>. />
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;
}< /code>
< /code>
< /div>
< /div>
< /p>

Dies ist nicht genau das, was ich erreichen möchte, und wenn ich versuche, dies mit unterschiedlichen Bildschirmgrößen zu reagieren, wird der Text in < /strong> den Grenze an die falschen Orte und es ist schwierig, es korrekt zu platzieren. Wenn jemand helfen könnte, das zu erreichen, was ich in den Bildern zeige, wäre das erstaunlich.
Vielen Dank im Voraus. < /P>