-1

I want to add custom style as :after on an input and if it's checked then slightly change the style. Is is it possible to achieve this for major browsers?

https://codepen.io/thor78/pen/xYxqbL?editors=1100

This currently works for Chrome only:

input[type=checkbox]:after {
    content: "";
    display: inline-block;
    padding: 12px;
    background: transparent;
    border: 2px solid orange;
    position: relative;
    top: -8px;
    left: -8px;
    border-radius: 3px;
}
input[type=checkbox]:checked:after {
    border: 2px solid green;
}
SG1Asgard
  • 64
  • 8

1 Answers1

0

Ok. So INPUT does not play well with speudo on CSS. On top of that only Google Chrome supports pseudoclass chaining and does allow pseudo on inputs as well with proper support.

Firefox and IE at this moment in time are lagging behind. I consider this topic closed for the moment.

Thanks for the help people.

SG1Asgard
  • 64
  • 8
  • 2
    "only Google Chrome supports pseudoclass chaining" That's not true, any modern browser does that. – vicbyte Jan 29 '18 at 13:40
  • 1
    Firefox and IE aren't "lagging behind". They are following the spec. can be replaced elements or not. It is up to the browser vendor how they implement them. If Firefox and IE choose to make inputs replaced elements then they are correct to ignore pseudo elements. – Turnip Jan 29 '18 at 14:00
  • This is what I am actually trying: https://codepen.io/thor78/pen/xYxqbL?editors=1100 It works only in Chrome for now. If I may have miss explained I apologize :) – SG1Asgard Jan 29 '18 at 14:05
  • If it doesn't work in Fx and IE/Edge (?), it's because they don't support pseudo-elements on input thus there's nothing to chain (and in CSS if any part of a selector is invalid, then the whole selector is invalid and the rule is ignored). On a link these browsers will "chain" :pseudos as any other decent browser. – FelipeAls Jan 29 '18 at 14:15
  • How much of this Q&A is the result of mixing pseudo-classes and pseudo-elements into a single term "pseudo" and how much of it is actual browser disparity? – BoltClock Jan 29 '18 at 14:17
  • @FelipeAls: Not supporting pseudo-elements on arbitrary element types does not make a selector invalid. As far as CSS is concerned, input[type=checkbox]:checked:after is a valid selector, because it contains exactly one pseudo-element, and all the other parts of the selector are valid. If a browser considers treats such a selector as invalid, that browser is buggy, and AFAIK no browser does. – BoltClock Jan 29 '18 at 14:18
  • Works on Chrome: https://codepen.io/thor78/pen/xYxqbL?editors=1100 – SG1Asgard Jan 29 '18 at 14:22
  • The point being: I just wanted to know if there is a way to chain it properly for IE11+, Firefox and Chrome, with current versions. – SG1Asgard Jan 29 '18 at 14:23
  • @SG1Asgard: And we're telling you that it's not an issue of chaining a pseudo-class with a pseudo-element. It's a more fundamental issue of using pseudo-elements with form elements, which as was pointed out earlier has already been *thoroughly* covered elsewhere, and in fact should have made itself apparent to you long before pseudo-classes ever entered the conversation. A browser that doesn't support pseudo-elements on form elements isn't suddenly going to just because you add a pseudo-class, and a browser that does does so regardless of whether or not you have the rule with the pseudo-class. – BoltClock Jan 30 '18 at 04:15
  • That's why I suspected that your Q&A arose from a misunderstanding of the two concepts to begin with - because they're completely unrelated, insofar as to have different names whereas your question incorrectly labels them with the same name. – BoltClock Jan 30 '18 at 04:17
  • Np, got it. It's clear now. Thanks for the help :) – SG1Asgard Jan 30 '18 at 07:33