3

I have the following code:

<style>
        input:valid ~ .test {
            border: 1px solid green;
        }

        input:invalid ~ .test {
            border: 1px solid red;
        }

        input:valid {
            border: 1px solid green;
        }

        input:invalid {
            border: 1px solid red;
        }
    </style>

    <input type="text" required />
    <div class="test">test</div>

now if u start typing in the textbox, the validation should modify the borders of both the input and the "test" div. This works in Chrome, however in IE the "test" div border change only gets triggered once i click somewhere else.

Why does this behave different in IE? and how can i make it work properly

EDIT: potatopeelings's answer was correct, but it seemed i simplified my question a bit too much.

input:valid ~ small .actionEmpty {
            display: block;
        }

        input:invalid ~ small .actionEmpty {
            display: none;
        }

it doesn't seem to work in case of display css settings, well the invalid one seems to work and the valid one doesn't weird. the behavior there is still on mousedown

any more ideas?

WtFudgE
  • 5,080
  • 7
  • 47
  • 59

1 Answers1

3

This seems very similar to :empty pseudo class issue with added/removed content and sibling combinators (this one is however for the + combinator and the :empty pseudo class). However a similar fix would work, namely add an infinitely looping animation on the .test element - add this at the end of your style section

input + .test {
    animation: repaint 1000s infinite linear;
}

@keyframes repaint {
    from { opacity: 1; }
    to { opacity: 0.99999; }
}

Note that I changed it from zoom (in the linked question) to opacity.

Community
  • 1
  • 1
potatopeelings
  • 40,709
  • 7
  • 95
  • 119
  • awesome dude, that worked, it's not the cleanest way, but i can't see any other way – WtFudgE May 06 '15 at 11:01
  • ok sorry, i'm not entirely there yet, look at my "edit" section – WtFudgE May 06 '15 at 12:11
  • Just change input + .test to input + small - I checked with My message and it works. By the way, I think you got your display values swapped (assuming you are trying for a validation message) – potatopeelings May 06 '15 at 13:17
  • that's it! lol, it wasn't working because i was trying to do this: input + small .actionEmpty { animation: repaint 1000s infinite linear; } thought that would work, but yea just small works fine :D thanks so much, at least now i will sleep comfortable ;) – WtFudgE May 06 '15 at 14:54