I want to use CSS only to create a floating label on an input but have it as a modifier class so that it doesn’t affect the original input, and also showing and hiding the placeholder text.
So, I need to keep the same HTML structure.
I have found examples, but they all seem to say that the input has to be before the label?
Using my markup is it possible to create this using css only?
<div class="test-field test-field--light">
<label for="a" class="test-field__label">Input label</label>
<input class="test-field__input" id="a" placeholder="Placeholder text" type="text" value="">
</div>
Here’s my pen: https://codepen.io/anon/pen/XwVrwY
Here is an example of what I need: https://codepen.io/peiche/pen/xOVpPo
Thanks