Проверка правильности оформления материала на флажок не показывает сообщение об ошибке
Я использую материал дизайн Lite для формы. Проблема, с которой я сталкиваюсь, заключается в том, что, когда для флажка установлена необходимая проверка, кажется, что оно скрывает сообщение об ошибке, как только оно отображается.
Обратите внимание, что фактическая проверка работает, как и ожидалось, просто сообщение об ошибке не отображается.
Вот кодекс с этой проблемой - http://codepen.io/anon/pen/LVqPzm
Вот используемый HTML-код:
<html>
<head>
<!-- Material Design Lite -->
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.min.js"> </script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.indigo-pink.min.css">
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<form>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
<input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" required />
<span class="mdl-checkbox__label">Checkbox</span>
</label>
<input type="submit">
</form>
</body>
</html>
Будем весьма благодарны за любую помощь относительно того, как получить необходимое сообщение для проверки правильности отображения флажка.
Обратите внимание, что эта проблема относится только к Chrome
2 ответа
Я сделал свой CSS исправить для этой проблемы
.mdl-checkbox.is-upgraded .mdl-checkbox__input {
-webkit-appearance: checkbox;
width: auto;
height: auto;
left: 2px;
top: 5px;
}
Вот ваша ручка обновлена> http://codepen.io/anon/pen/grGmZW
Проблема в CSS.
менять
.mdl-checkbox.is-upgraded .mdl-checkbox__input {
position: absolute;
width: 0;
height: 0;
margin: 0;
padding: 0;
opacity: 0;
-ms-appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
border: none; }
в
.mdl-checkbox.is-upgraded .mdl-checkbox__input {
position: absolute;
left:-9999px;
top:-9999px; }
Это также работает для радио.