JQuery Super Labels Plugin(github.com) This plugin positions your labels on top of your form fields (similiar visually to placeholder) and makes the label slide across the field when gaining focus and fade out when a value is entered. |
JQuery Super Labels Plugin(github.com) This plugin positions your labels on top of your form fields (similiar visually to placeholder) and makes the label slide across the field when gaining focus and fade out when a value is entered. |
$('form').superLabels({ slide:false });
I generally use normal boring labels, then modernizer to detect if the browser supports placeholders, if so hide the labels and add placeholders to the attributes
This plugin doesn't replace (true) placeholder functionality, so I suppose it's the same as what you're doing except more semantic.
&::-webkit-input-placeholder {
-webkit-transition: text-indent 200ms ease-in-out;
visibility: visible !important;
}
&:focus::-webkit-input-placeholder {
text-indent: 115px; /* Change to width of input */
}
If only you could do the same for Firefox...