Обводка инпута красным/зеленым без JS

[hike]

Привет. Есть ли возможность только с помощью html5/css3 обводить поля красным/зеленым в зависимости от состояния инпута, не используя обработку событий с помощью javascript? Подскажите, как это сделать, как определить состояние инпута при помощи html5?

[AlexZaw]

 

<input id="check" type="checkbox"><label for="check">Label
</label>
<br>
<input type="text">

input:checked~label{color: red}
input:hover{border:2px solid green}
input:focus{border:2px solid red}

 

Edited October 11, 2017 by AlexZaw

[Hasiev]

А какое состояние нужно определять? Есть псевдоклассы - :valid , :invalid .

Они позволяют определить, соответствуют ли данные введенные пользователем типу инпута. 

А обводки можно делать с помощью border, или outlines, или с помощью теней - box-shadow. Последние два не влияют на блочную модель. Но, я не знаю как ведут себя тени с элементами форм, по моему были проблемы на некоторых платформах.

Edited October 11, 2017 by Hasiev

[hike]

Вот статья http://htmlbook.ru/samhtml5/formy/adres-elektronnoi-pochty для типа email браузер сам обводит красным при несоответствии и выводит ошибку. Для других типов инпутов, например type=tel это сделать как-то возможно?

[AlexZaw]

без js только так смог придумать:

<form action="">
<input type="tel" pattern="[0-9]{3}-[0-9]{3}" placeholder="example 123-456">
<button>submit</button>
</form>

input[type="tel"]:invalid{border:2px solid red}

песочница: https://jsfiddle.net/AlexZaw/4gpyds1s/

Edited October 14, 2017 by AlexZaw