internet explorer 11 - How to avoid IE11 "slow" evaluation of CSS :invalid and :valid pseudo selectors -
i'm aware of question shows :valid , :invalid pseudo selectors not working @ in ie11:
css form:valid selector doesn't work in ie11
yet there example of floating labels:
https://snook.ca/archives/html_and_css/floated-label-pattern-css
here, ie11 behaving differently. @ first, not seem work. type in fields of form , css supposed apply, doesn't, different chrome , firefox.
however, when exit field, or move next field, see css applied, in ie11. if "one behind".
i'm facing exact same issue in own implementation, not public. there solution (non-js) work around strange evaluation behavior of ie11?
no, , since fixed in edge not in ie11.
i did note 1 thing, css changes works on input though, if this?
.field, .field label { position: relative; font-weight: bold; display: inline-block; font-family: arial; font-size: 10px; } input { position: absolute; top: 0; border: 1px solid #999; padding: 3px 2px; transition: top 0.5s; } input:focus { outline: none; } form:valid, input:valid { top: 18px; transition: top 0.5s; }
<form> <div class="field"> <label>first name</label> <div> <input type="text" pattern=".+" required="" placeholder="first name"> </div> </div> </form>
Comments
Post a Comment