Thank you
]]>:invalid
on select element does not work on Safari/Mac (at least version 13).
Also for people who use this to mimic placeholder gray color on input fields, note that Firefox dev edition on mac renders colors differently for both. I don’t know why. Same color hex ref but renders differently.
]]>:invalid
on :disabled
inputs.
/* IE will match :disabled:invalid */
input:invalid { /* ... */ }
To fix this, we have to increase selector specificity with the :enabled
pseudo-class.
/* Works across all modern browsers (and IE) */
input:enabled:invalid { /* ... */ }
]]>According to caniuse.com android and iOS now support :invalid pseudo-class.
]]>Was just going to mention the same thing: can’t actually use generated content on input elements. Just spent 20 minutes trying to do it based on this article before I remembered why it wasn’t working! :)
]]>You’re right, Neil.
Here is some explanation why it’s not possible: http://stackoverflow.com/questions/2587669/can-i-use-the-after-pseudo-element-on-an-input-field
]]>input[required]:invalid::after,
input[required]:valid::after {
content: ‘not a chance’;
}
Neil
Email: youremail@domain.com
Email (required) : chris@domain.com > becomes Valid _