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

Popular posts from this blog

magento2 - Magento 2 admin grid add filter to collection -

Android volley - avoid multiple requests of the same kind to the server? -

Combining PHP Registration and Login into one class with multiple functions in one PHP file -