I am encountering an issue with the jQuery addClass() function in Firefox where the class is not being added to the current element. Interestingly, this code works perfectly in Chrome and Safari (IE has not been tested).
Here is the CSS snippet :
$(document).ready(function(){
$(".placeholder").click(function(){
$(this).addClass("placeholder-small");
$(this).prev("input").focus();
});
$("input").on("focus",function(){
$(this).nextAll(".placeholder").first().addClass("placeholder-small");
});
});* {box-sizing:border-box;outline:none;-webkit-appearance:none}
html, body {padding:0;margin:0;background-color:#131419;color:#fff;font-family:"DIN", arial;font-size:14px;letter-spacing:0.15em;font-weight:300}
input[type="text"], input[type="email"], input[type=number], input[type="password"] {max-width:250px;width:100%;background-color:transparent;border-radius:0;border:0;border-bottom:1px solid #b6b6b8;color:#fff;font-family:"DIN",arial;font-size:inherit;padding:10px 8px;margin:10px 0;z-index:1}
.required {position:relative}
.required:after {position:absolute;top:0;right:0;content:"*";color:#ff0000;z-index:9}
.placeholder {position:absolute;top:0;left:0;transition:all .2s;z-index:0}
textarea ~ .placeholder {top:-135px}
.placeholder-small, input:-webkit-autofill ~ .placeholder {transform:translateY(-125%);-moz-transform: translateY(-125%);font-size:0.85em;color:#616777}<form method="post">
<div style="padding:50px"><span class="required"><input type="text" name="firstname" value="" pattern=".{1,}" required minlength="1" maxlength="255" /><div class="placeholder">Prénom</div></span></div>
</form>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$(".placeholder").click(function(){
$(this).addClass("placeholder-small");
$(this).prev("input").focus();
});
$("input").on("focus",function(){
$(this).nextAll(".placeholder").first().addClass("placeholder-small");
});
});
</script>If you'd like to see it in action, visit this page :