Giters

ginader / HTML5-placeholder-polyfill

Small and robust polyfill for the HTML5 placeholder attribut.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

visuallyhidden label issues fixed with CSS addition

orvalle opened this issue · comments

commented

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>
commented

Thanks orvalle, fixed my problem