我正在研究我網站的樣式，我想為表單的這一部分設置樣式：我試過了，field.errors但不是這樣。有任何想法嗎？
1 回答
藍山帝景
TA貢獻1843條經驗 獲得超7個贊
JS您可以在代碼中更改此樣式
(function() {
var input = document.getElementById('username');
var form = document.getElementById('form');
var elem = document.createElement('div');
elem.id = 'notify';
elem.style.display = 'none';
form.appendChild(elem);
input.addEventListener('invalid', function(event){
event.preventDefault();
if ( ! event.target.validity.valid ) {
input.className = 'invalid animated shake';
elem.textContent = 'Username should only contain lowercase letters e.g. john';
elem.className = 'error';
elem.style.display = 'block';
}
});
input.addEventListener('input', function(event){
if ( 'block' === elem.style.display ) {
input.className = '';
elem.style.display = 'none';
}
});
})();
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
background-color: #ECEFF1;
}
form {
max-width: 300px;
margin-top: 60px;
margin-right: auto;
margin-left: auto;
text-align: left;
position: relative;
padding-top: 80px;
}
label,
input {
display: block;
}
label {
font-size: 12px;
text-transform: uppercase;
color: #B0BEC5;
margin-bottom: 10px;
}
input {
width: 100%;
padding: 10px;
outline: 0;
border: 2px solid #B0BEC5;
}
input.invalid {
border-color: #DD2C00;
}
#notify {
margin-top: 5px;
padding: 10px;
font-size: 12px;
width: 100%;
color: #fff;
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
#notify.error {
background-color: #DD2C00;
}
<form id="form">
<div>
<label for="username">Username</label>
<input name="username" type="text" placeholder="Username" pattern="[a-z]{1,15}" id="username" value="12345">
</div>
</form>
添加回答
舉報
0/150
提交
取消