我正在使用 Material Design Lite 来制作表单。我面临的问题是,当在复选框上设置所需的验证时,它似乎在渲染后立即隐藏错误消息。
请注意,实际验证正在按预期进行,只是未显示错误消息。
这是一个解决这个问题的代码笔 -http://codepen.io/anon/pen/LVqPzm 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
我修复了这个问题的 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 http://codepen.io/anon/pen/grGmZW
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)