0

I'm trying to stack css selectors as follows.

input[type="search"]::-webkit-input-placeholder,
input[type="search"]:-moz-placeholder,
input[type="search"]::-moz-placeholder,
input[type="search"]:-ms-input-placeholder {
    color:transparent;
}

However, chrome and safari do not recognize it. They do however recognize...

input[type="search"]::-webkit-input-placeholder {
    color:transparent;
}
input[type="search"]:-moz-placeholder {
    color:transparent;
}
input[type="search"]::-moz-placeholder {
    color:transparent;
}
input[type="search"]:-ms-input-placeholder {
    color:transparent;
}

While the longer version will work, it will bloat my css by about 4x its current size. I'm trying to figure out if I'm doing something wrong or is it just not possible.

ToddJCrane
  • 1,587
  • 1
  • 14
  • 22
  • found an article that says "::input-placeholder has decent implementation, but for now we’ll need to use vendor prefixes. We are also unable to combine the prefixed selectors into one rule. They each need to be defined separately, otherwise the entire rule will be ignored by the browser." – Billy Nov 24 '14 at 22:24
  • @Billy `:-moz-placeholder` is for Firefox 4-18, `::-moz-placeholder` is for Firefox 19+. – Rob W Nov 24 '14 at 22:27
  • Just found an article that says "::input-placeholder has decent implementation, but for now we’ll need to use vendor prefixes. We are also unable to combine the prefixed selectors into one rule. They each need to be defined separately, otherwise the entire rule will be ignored by the browser." The article is [here, Treehouse blog](http://blog.teamtreehouse.com/the-css3-placeholder-pseudo-element), You must have been typing the answer to my question as to whether the 2 -moz-'s were a typo just as I was editing the question.. – Billy Nov 24 '14 at 22:30

0 Answers0