Material design lite required validation on checkb

I am using material design lite for a form. The issue that I'm facing is that when required validation is set on a checkbox, it seems to be hiding the error message as soon as it gets rendered.

Please note that the actual validation is working as expected, just the error message is not being displayed.

Here is a codepen with this issue - http://codepen.io/anon/pen/LVqPzm

Here is the HTML used:

<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>

Any help regarding how to get the required validation message for checkbox to be displayed properly will be highly appreciated

Please note that this issue is specific to Chrome

回答1:

I made my CSS fix for this issue

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

Here is your pen updated > http://codepen.io/anon/pen/grGmZW

回答2:

problem is in CSS.

change

.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; }

This also works for radio.