Semantic UI input element in error state inside form

Viewed 1366

Take a look at the example for an input in error state. As you can see the CSS will make the input appear with error styles as soon as it has ui input error as classes. However when placed inside a ui form, a very common usecase I would assume, the very same classes are overruled by a more specific selector coming from the ui form: .ui.form input[type=...]. Causing the error class to have no effect at all.

I did try to add error as state to the parent form div as well - no effect. To the parent segment - no effect.

Demo showing the working version without form: https://jsfiddle.net/hahz35ka/

Demo showing the non-working version with form: https://jsfiddle.net/hahz35ka/1/

Why? What is the supposed usage of inputs with errors inside forms?

1 Answers
Related