1

I have the following snippet. I want to render a little red triangle in the top-left of a cell if the input has the CSS class 'changed'.

It works for checkboxes, but not for text inputs. When I inspect the element in Chrome, the diamensions of the pseudo-element for a checkbox is 0 x 0 and for a text input it's auto x auto so there is clearly some difference in the way the browser is handling these but I can't figure it out.

How can I change this so that it works the same for both? What is the mechanism responsible for the difference? Does one or the other have some implicit property that I could override? I am not interested in whether or not I should use this (I have already read this answer).

I'm using Chrome v75.0.3770.100.

td {
  position: relative;
  border: 1px solid black;
}
td input {
  margin-left: 10px;
}
td .changed::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 3px;
    border-left-color: #c00000;
    border-top-color: #c00000;
}
<table>
  <tr>
    <td><input type="checkbox" class="changed"/></td>
    <td><input type="text" class="changed"/></td>
  </tr>
</table>
Michael
  • 41,989
  • 11
  • 82
  • 128
  • @NickParsons I read it. "Oddly, it works with some types of input". This is not an answer to *why*, whether there is a workaround, etc. – Michael Jul 09 '19 at 13:36
  • Did you see this particular answer https://stackoverflow.com/a/4660434/5648954 ? it explains why it won't work for your textbox – Nick Parsons Jul 09 '19 at 13:38
  • 1
    If it makes any difference, you don't get the triangle on Firefox on either control – freefaller Jul 09 '19 at 13:38
  • @NickParsons No it does not. It says "input can not contain other elements hence they're not supported". But clearly they are supported for checkboxes because you can see that it works. My question is about why is there a *discrepancy*, which that question is not asking and does not answer. – Michael Jul 09 '19 at 13:40
  • 4
    It shouldn't really work for any input as the after is put inside the input you are styling and as inputs cannot have child elements, it should not work. I guess chrome just allows it for checkboxes although strictly speaking it is invalid and may be taken away in future – Pete Jul 09 '19 at 13:42
  • 1
    @Michael According to [the answer](https://stackoverflow.com/questions/2587669/can-i-use-a-before-or-after-pseudo-element-on-an-input-field/4660434#4660434) "it's a bug and non-standard" ("If you ask me, if some browser does display these two pseudo-elements on non-container elements, it's a bug and a non-standard conformance. Specification directly talks about element content...") – Nick Parsons Jul 09 '19 at 13:42
  • @freefaller It's good to know but I was more interested in understanding the mechanism responsible for the difference (e.g. "A checkbox has X property implicitly which makes it behave differently"). It seems there possibly isn't such an explanation and that the implementation is just janky. In which case, any one of you can feel free to write such an answer to that effect and I'd accept it. – Michael Jul 09 '19 at 13:47
  • I wasn't aware of it (hence my accidental answer), so I won't be taking any credit. I think @NickParsons should do that – freefaller Jul 09 '19 at 13:52
  • @Michael the answer is simple: don't use it for input element. Technically pseudo element aren't meant to work with them and some browser allow this, you sould not rely on them. You should rely on the generic rule which is : you cannot use pseudo element with input – Temani Afif Jul 09 '19 at 14:01
  • @TemaniAfif I didn't ask whether I should use it. I never said I was "relying" on it. I asked about the mechanism behind the difference so that I may understand it better. Saying, effectively, "it doesn't matter *why*, don't use it" does not help me since I am *already* working around it. – Michael Jul 09 '19 at 14:31
  • the answer is in the duplicate : https://stackoverflow.com/a/36073063/8620333 – Temani Afif Jul 09 '19 at 14:37

0 Answers0