CSS :After Input Placeholder Not Working in Mozilla

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).

CSS :after input placeholder not working in mozilla

.......................

Input elements are replaced elements.

Pseudo-elements, such as :after or :before will not work on

 <button>, <textarea>, <input>,  <select>, <img>, <object> 

these elements.

More info

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

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>

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.

Firefox Placeholder Before CSS selector not working

The issue is not with the placeholder, but the fact that you are trying to apply a ::before pseudo-element to an input, which isn't supported cross-browser because it's not defined within the standards. See this answer.

Since this obviously depends on the form element being [data-required] (although it's not clear to me why you need a data-required attribute in addition to the standard required), you may need to add an extra span element after the input and style that element using a sibling selector, rather than using a pseudo-element.

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.

---

Related Topics