<form id="form">
<input class="ui-input" name="user" >
<button class="ui-button" type="submit">submit</button>
</form>
html,body{
margin: 0;
height: 100%;
}
body{
background: #333;
}
form{
padding: 20px;
}
.ui-input,.ui-button{
outline: 0;
border: 1px solid #fff;
line-height: 2.4em;
padding: 0 .5em;
border-radius: 3px;
background: transparent;
color: #fff;
}
.ui-input{
animation: resetBg .1s forwards;
}
@keyframes resetBg {
to {
color: #fff;
background: transparent!important;
}
}
var form = document.getElementById('form');
form.onsubmit = function(ev){
ev.preventDefault()
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.