Recently, I ran into a minor issue while working on my login page. I wanted to include 2 fontAwesome icons just like in the example image:
https://i.sstatic.net/NweVp.png
However, after checking W3C guidelines, I discovered that placeholders cannot be used in certain input elements. To address this, I wrote a simple vanilla JS script to target the ID of each input box and assign a placeholder dynamically.
The challenge arose when trying to style these placeholders using 'font-family: "fontAwesome";'. Despite my attempts to store the JS code in a variable for styling purposes, it didn't yield the desired outcome. So, the question remains - what is the most common solution to this dilemma? Should I consider using an image instead?
This snippet showcases part of my code where placeholders are being assigned through JS:
let x = document.getElementById("mdp2").placeholder = " Mot de passe...";
let y = document.getElementById("username").placeholder= " Nom d'utilisateur ou e-mail...";* {
padding: 0;
margin: 0;
text-decoration: none;
font-family: "Play", sans-serif;
box-sizing: border-box;
}
h1,
h2 {
font-family: "Varela Round", Arial, Helvetica, sans-serif;
}
.compte {
position: relative;
width: 100%;
height: 1500px;
overflow: hidden;
background : orange;
}
(complete CSS code here...)
<!DOCTYPE html>
(complete HTML code here...)
</html>Your insights and suggestions would be greatly appreciated!