Showing Placeholder text for password field in IE

Active3 hr before
Viewed126 times

6 Answers


Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers , How do you adress the password-placeholder must not show as stars issue? – Frank Nocke Aug 21 '13 at 10:16 ,I know there is a ton of placeholder questions, but I am trying to perfect mine., Advertising Reach developers & technologists worldwide

You could also try this... it detects that the browser does not have support for placeholder and works for all input types

function FauxPlaceholder() {
        if(!ElementSupportAttribute('input','placeholder')) {
            $("input[placeholder]").each(function() {
                var $input = $(this);
                $input.after('<input id="'+$input.attr('id')+'-faux" style="display:none;" type="text" value="' + $input.attr('placeholder') + '" />');
                var $faux = $('#'+$input.attr('id')+'-faux');

                $'class', $input.attr('class')).attr('style', $input.attr('style'));

                $faux.focus(function() {

                $input.blur(function() {
                    if($input.val() === '') {
    function ElementSupportAttribute(elm, attr) {
        var test = document.createElement(elm);
        return attr in test;
load more v

The placeholder attribute places text inside an input box, usually in a light gray color, as a placeholder, indicating what type of content is expected from the user.,Android 4.0 and 4.1 and webview did not show the placeholder attribute on number. Even though the spec doesn’t require it, all other browsers do.,Placeholders should be treated like a “hint.” They are not a replacement for <label> (accessibility) or the title attribute (longer advisory text).,The text remains while the input has no value, even when the form control receives focus. As soon as the input takes on value (from typing or any other means), the placeholder text is removed.

The Low Down

The placeholder attribute places text inside an input box, usually in a light gray color, as a placeholder, indicating what type of content is expected from the user.

load more v

The :placeholder-shown CSS pseudo-class represents any <input> or <textarea> element that is currently displaying placeholder text.,The ::placeholder pseudo-element styles the placeholder itself.,When form fields are too small, placeholder text can get cropped in an undesirable way. You can use the text-overflow property to alter the way overflowing text is displayed.,This example applies special font and border styles when the placeholder is shown.

/* Selects any element with an active placeholder */: placeholder - shown {
   border: 2 px solid silver;
load more v

A final thought: Do you even need that additional placeholder information?,In High Contrast Mode, placeholder content is assigned one of those high contrast colors, making it look like pre-filled information. As discussed earlier, this could prevent people from understanding that the input may need information entered into it.,Placeholder text’s length is also limited to the width of the input it is contained in. In our responsive, mobile-first world, there stands a very good chance that important information could be truncated:,May look like pre-filled information and be skipped over.

The presence of a placeholder attribute won’t be flagged by automated accessibility checking software. However, this doesn’t necessarily mean it’s usable. Ultimately, accessibility is about people, not standards, so it is important to think about your interface in terms beyond running through a checklist.

Call it remediation, inclusive design, universal access, whatever. The spirit of all these philosophies boils down to making things that people—all people—can use. Viewed through this lens, placeholder simply doesn’t hold up.

load more v

In Internet Explorer  ,HTML Code 2: This code implements placeholder selector in email attribute of input tag. Placeholder selectors can be apply to any attributes (text, tel, password, and etc) of input tag, to highlight change in color in any different attributes.  ,For Internet Explorer selectors can be,  ,Change an HTML5 input placeholder color with CSS

In most of the browsers, the placeholder (in input tag) is of grey color, to change the color of this placeholder, non-standard ::placeholder selectors can be used, by which implement the color attribute in that particular selector.
This selector can change browser to browser, example
For Chrome, Mozilla, and Opera Browsers, selectors can be implemented as 


For Internet Explorer selectors can be, 

: -ms - input - placeholder

For Internet Edge, it can be, 

::-ms - input - placeholder
load more v

In the example below, form instructions indicate how required fields are marked, the expected format for the main data fields, and where to find additional help for each input.,In the example below, the required format for the “Expiration Date” is indicated by “MM/YYYY” within the same label:,In addition to overall instructions, it is also important to provide relevant instructions within the labels of the form controls. For example, to indicate required input fields and data formats in the text of the labels.,3.3.2 Labels or Instructions: Labels or instructions are provided when content requires user input. (Level A)

<label for="expire">Expiration date (MM/YYYY): </label> <input type="text" name="expire" id="expire">
load more v

Other "field-showing" queries related to "Showing Placeholder text for password field in IE"