HTML5-placeholder-polyfill
HTML5-placeholder-polyfill copied to clipboard
Published
20 hours ago •
ginader
ginader
visuallyhidden label issues fixed with CSS addition
1.visuallyhidden <label>s NOT hidden on browsers that support placeholder (example: Firefox 18.0.).
2. float: right and text-align: right placeholders NOT positioned correctly in IE 7-9 with visuallyhidden <label>s.
Workaround to placeholder-polyfill.min.css:
Add label.visuallyhidden, before label.visuallyhidden-with-placeholder
Code sample for issues:
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" type="text/css" href="css/placeholder_polyfill.min.css" />
<body>
<div style="text-align: right;">
<code>text-align: right;</code>
<form action="#">
<label for="text3" class="visuallyhidden">Label 3</label>
<input id="text3" name="text3" placeholder="Misplaced" type="text" />
<label for="text4" class="visuallyhidden">Label 4</label>
<input id="text4" name="text4" placeholder="Centered-ish" type="text" />
<label for="text5" class="visuallyhidden">Label 5</label>
<input id="text5" name="text5" placeholder="Correct" type="text" />
</form>
</div>
<div style="float: right;">
<code>float: right;</code>
<form action="#">
<label for="text1" class="visuallyhidden">Label 1</label>
<input id="text1" name="text1" placeholder="Misplaced" type="text" />
<label for="text2" class="visuallyhidden">Label 2</label>
<input id="text2" name="text2" placeholder="Correct" type="text" />
</form>
</div>
<script type="text/javascript" src="js/lib/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/lib/placeholder_polyfill.jquery.js"></script>
