Moz-Placeholder Does Not Work in Firefox

moz-placeholder does not work in Firefox

I'ts working, it's just that the last rule is considered more specific by Firefox. Try this:

::-webkit-input-placeholder { color:red; }
.row input[type="text"]::-moz-placeholder { color:red; }
.row input[type="text"]:-moz-placeholder { color:red; }

.row input[type="text"] {
     color: blue;     
}

See this fiddle for a working demo.

I'm unsure where the difference in browsers comes from, or which one is "correct". A similar experiment with a tag and :hover pseudo class shows the same behavior in both FF and Chrome: both will ignore the pseudo class color if the element's selector is more specific (and if you make the same change as I suggested above you get the same (expected?) behavior in both Chrome and FF).

Firefox -moz-placeholder, not working

If one part of a selector is invalid, then the whole selector will be invalidated.

Therefore, one needs to have two different rules for each of -moz- and -webkit-.

placeholder not working in firefox

Webkit uses ::-webkit-input-placeholder to target placeholder text:

.txt1::-webkit-input-placeholder:before {
    color:#c2c3c3;
    content:"Hey Brad,\A Tell us what's on your mind";
}

While Firefox uses :-moz-placeholder to target the placeholder text:

.txt1:-moz-placeholder:before {
    color:#c2c3c3;
    content:"Hey Brad,\A Tell us what's on your mind";
}

You've added input to Firefox's selector, which isn't needed. You should only include one colon at the beginning of the selector for Firefox, not two. I would also suggest removing the extra colon after the selector ::before and change it to :before as these are unnecessary. Use my code examples above and you should be good. Hope this helps! Let me know if you have questions.

Source: https://developer.mozilla.org/en-US/docs/CSS/:-moz-placeholder

Text input placeholders not displaying in IE and Firefox

As luke2012 stated this happens when box-sizing: border-box; is being used on text type input fields. However this only happens when a fixed height is being used (such as in the Bootstrap framework) and there is too much top and bottom padding. Which not only prevents placeholder text from displaying but also input text as well in Firefox.

I find that the better solution is to keep box-sizing: border-box; and to instead remove the top and bottom padding and increase the height to the total height that you want the input field to have (including any border).

input[type="email"], input[type="password"], input[type="text"] 
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 42px; // Increase height as required
    margin-bottom: 30px;
    padding: 0 20px; // Now only left & right padding
}

This keeps things more consistent and works well on frameworks such as Bootstrap.

Alternatively, you could increase the fixed height or set height: auto; and adjust the top and bottom padding as required.

Wrapping input placeholder text not working in Firefox

As far as I know Mozilla Firefox removed the ability to wrap the placeholder. The placeholder element is extremely tricky and technically not that well supported.

A solutions can be to remove placeholders entirely and rely on another option. Here's an article about (not) using the placeholder and its alternatives from Smashing Magazine.

Can't get placeholder centered with moz-placeholder

This isn't exactly a bug. There is simply no spec yet that browser vendors can follow. It appears that instead :placeholder-shown is on track to be standardized, although browsers do not support it right now.

The non-standard ::-moz-placeholder is restricted in what style rules it may accept. text-align is not one of the accepted rules (The rule doesn't have the CSS_PROPERTY_APPLIES_TO_PLACEHOLDER bit set).

So you cannot use text-align with ::-moz-placeholder at the time of writing.

However, you can text-align the whole <input>.

If you only want the placeholder text centered, but not entered text, then you may add some Javascript to set .style.textAlign according to the <input>.value when it changes. That's a nasty work-around, but should work. E.g. see this fiddle.

<input>.addEventListener("input", function(e) {
    this.style.textAlign = this.value === "" ? "center" : "left";
});

Placeholder not working in Chrome and Safari but working in Firefox

You can just use ::placeholder to style the placeholder of the input text. This should be supported in all modern browsers.

Since this, and the box-shadow props are standardized, the latest versions of the browsers shouldn't need vendor prefixes for these rules.

#sv2 input::placeholder {
  color: transparent
}

#sv2 input:focus::placeholder {
  color: gray
}

input[type=search]:focus {
  background-color: #fff;
  border-color: #66cc75;
  box-shadow: 0 0 5px rgba(109, 207, 246, .5);
}

<form method="get" action="https://www.example.com/" id="sv2">
  <input name="s" id="s" size="30" type="search" placeholder="Search example.com">
</form>

---

Related Topics