Игнорируется параметр maxlength

<form>
<input class = 'reg' id = 'log' placeholder = 'Логин' style = 'display:none'  maxlength="16"></input>
<input class = 'reg' id = 'pass' placeholder = 'Пароль' style = 'display:none' type = 'text' maxlength="10"></input>
<input class = 'reg' id = 'rep' placeholder = 'Повторите пароль' style = 'display:none' type = 'password'></input>
</form>

CSS

.reg {
position: absolute;
padding: 10px;
margin-left: 300px;
border-radius:10px;
box-shadow: 0 1px 0 #ccc inset;
transition:500ms all ease;
width: 150px;
}
.reg:hover {
width: 180px;
}
#log {
margin-top: 150px;
}
#pass {
margin-top: 200px;
}
#rep {
margin-top: 250px;
}

• Position:absolute мне нужен, т.к. элемент я помещаю на canvas. В чем собсна проблема.

• style='display:none' на определенном уровне преобразовывается в style='display:block'

Параметр maxlength тупо игнорируется, не смотря на maxlength="12" я могу вводить любое количество символов. В чем проблема, что мешает?

Заранее благодарен за ответ)