Re-implement password placeholder?

[amerikan]

For passwords, currently the placeholder plugin generates HTML like this:

<input type="password" placeholder="your placeholder text" style="display:none"> <!-- visible when password is filled -->
<input type="text" value="your placeholder text"> <!-- visible when password is empty ->

Which seems to be some what intrusive. You have to deal with a lot of edge cases and overall seems messy. What if instead we make it generate something like this:

<div class="placeholder-container" style="position: relative;">
    <label style="position:absolute;">your placeholder text</label>
    <input type="password" placeholder="your placeholder text">
</div>

We can then just use CSS styling to super impose the <label> over the <input> password field.

Here's a simple screenshot of the above code in action:

With this approach you don't have to deal with cloning password fields then clearing them etc.

This approach can even be used for the other input types.

I'm not sure if this approach has been explored or discussed before. Any thoughts?

[amerikan]

This would require a big re-write. I actually implemented a new plugin using this implementation. https://github.com/erikmontes/placeholder-polyfill