<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()
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.