Question

我正在使用材质设计精简版来表单。我面临的问题是，当复选框上设置了必需的验证时，它似乎在渲染后立即隐藏错误消息。

请注意，实际验证工作正常，只是没有显示错误消息。

以下是包含此问题的codepen - 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

Answer 1

我为此问题制作了CSS修复程序

.mdl-checkbox.is-upgraded .mdl-checkbox__input {
  -webkit-appearance: checkbox;
  width: auto;
  height: auto;
  left: 2px;
  top: 5px;
}

这是您的笔更新＆gt; http://codepen.io/anon/pen/grGmZW

Answer 2

问题出在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; }

这也适用于广播。

复选框上的材料设计精简版验证未显示错误消息

2 个答案: