2

我正在使用材料设计精简版作为表格。我面临的问题是，当在复选框上设置了所需的验证时，它似乎会在呈现错误消息后立即隐藏它。

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

这是一个有这个问题的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

4

2 回答 2

1

我为这个问题做了我的 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

于 2016-07-09T12:07:43.027 回答
0

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

这也适用于收音机。

于 2015-10-20T11:45:43.193 回答