Change a Html5 Input'S Placeholder Color With Css

Change a HTML5 input's placeholder color with CSS

Implementation

There are three different implementations: pseudo-elements, pseudo-classes, and nothing.

WebKit, Blink (Safari, Google Chrome, Opera 15+) and Microsoft Edge are using a pseudo-element: ::-webkit-input-placeholder. ^[Ref]
Mozilla Firefox 4 to 18 is using a pseudo-class: :-moz-placeholder (one colon). ^[Ref]
Mozilla Firefox 19+ is using a pseudo-element: ::-moz-placeholder, but the old selector will still work for a while. ^[Ref]
Internet Explorer 10 and 11 are using a pseudo-class: :-ms-input-placeholder. ^[Ref]
April 2017: Most modern browsers support the simple pseudo-element ::placeholder ^[Ref]

Internet Explorer 9 and lower does not support the placeholder attribute at all, while Opera 12 and lower do not support any CSS selector for placeholders.

The discussion about the best implementation is still going on. Note the pseudo-elements act like real elements in the Shadow DOM. A padding on an input will not get the same background color as the pseudo-element.

CSS selectors

User agents are required to ignore a rule with an unknown selector. See Selectors Level 3:

a group of selectors containing an invalid selector is invalid.

So we need separate rules for each browser. Otherwise the whole group would be ignored by all browsers.

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #909;
}

::placeholder { /* Most modern browsers support this now. */
   color:    #909;
}

<input placeholder="Stack Snippets are awesome!">

Changing an input's HTML5 placeholder color with CSS does not work on Chrome

You forget a :.
Because of that, the whole selector got corrupted and didn't work.
http://jsfiddle.net/a96f6/87/

Edit:
Seems like (after an update?) this doesn't work anymore, try this:

input::-webkit-input-placeholder{
    color:red;
}
input:-moz-placeholder {
    color:red;
}

Note: don't mix the vendor prefix selectors (-moz, -webkit, -ms, ...). Chrome for example won't understand "-moz-" and then ignores the whole selector.

Edit for clarification:
To make it work in all browsers, use this code:

::-webkit-input-placeholder {
    color:red;
}

::-moz-placeholder {
    color:red;
}

::-ms-placeholder {
    color:red;
}

::placeholder {
    color:red;
}

how to change input text placeholder color if using foundation

Your CSS is probably overwritten by ZurbFoundation CSS, as you set your own styles before loading ZurbFoundation CSS. Try to switch the order of your used CSS and it should work.

Unline inline style like <div style="color:red">, defining an external CSS with <link> or using <style> makes no difference in specificity or precedence.

<html>
<head>
<link rel="stylesheet" href="../includes/foundation-6.2/css/foundation.css" />

<style>
input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #ff0000;
    opacity: 1; /* Firefox */
}
input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #ff0000;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #ff0000;
   opacity:  1;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #ff0000;
   opacity:  1;
}
input:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #ff0000;
}
input::-ms-input-placeholder { /* Microsoft Edge */
   color:    #ff0000;
}
</style>

    <!--<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>-->
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="js/jquery.validate.min.js"></script>
    <script src="js/additional-methods.js"></script>
</head>
<body>
<form id="frmSearchAddress" method="post">

                    <div class="row">

                    <div class="large-4 columns">

                        <input type="text" placeholder="Street number" name="street_number" required/>
                        <div class="error">No results found.</div>
                    </div>
                    <div class="large-6 columns">
                        <input type="text" placeholder="Street name" name="street_name" required/>
                    </div>
                    <div class="large-2 columns">
                        <input class="" type="submit" value="Search" id="btnSearch">
                    </div>

                    </div>
                </form>
<script src="../includes/foundation-6.2/js/foundation.min.js"></script>
<script>
      $(document).foundation();
</script>
</body>
</html>