3

Possible Duplicate:
Combine CSS Attribute and Pseudo-Element Selectors?

I have a very different issue in Chrome. I used the pseudo selector :after to display asterisk mark on required field items. I used custom attribute 'required' to identify the labels which require asterisk symbol. It works fine in Firefox but in Chrome it behaves differently. All the fields including the not required ones now show asterisk symbol after corresponding label. The strangest fact is when I use Chrome developer tools to inspect the label, the asterisk symbol simply vanishes.

HTML:

<div class="labelbox">
    <label data-required>Name</label>
    <span class="float-right">:</span>
</div>

CSS:

label[data-required]:after {
    content: "*";
    color: red;
}
Community
  • 1
  • 1
varunvs
  • 875
  • 12
  • 23
  • Have you googled around a bit? This may be outside webkit's capabilities. – Abhranil Das Feb 21 '12 at 06:22
  • @AbhranilDas I googled a bit around this issue but couldn't find anything useful. But in Firefox it is working fine. That's what I couldn't figure out. Seems like this is a bug in Chrome – varunvs Feb 21 '12 at 06:34
  • This bug was found a month ago; there's some more research in the dupe question. It looks like Chrome has trouble with attribute selectors and pseudo-elements. I'm not sure if it's been reported yet... – BoltClock Feb 21 '12 at 06:38
  • @BoltClock I have tried it on Chrome beta. The issue still persists. Seems like they haven't worked on it. – varunvs Feb 21 '12 at 06:58

1 Answers1

4

I'm seeing the same error, can't seem to figure it out. Might be a bug in chrome. Either way, I'd just use a class of required and use label.required:after as the selector. That seems to work properly.

Christian
  • 19,605
  • 3
  • 54
  • 70
  • It seems fine but the color of the entire label seems to be changing. Do you have any possible solution to it? – varunvs Feb 21 '12 at 06:33
  • Sorry, the color issue was a mistake from my side. It's working fine. Thanks for your help – varunvs Feb 21 '12 at 06:37