<input type="text" id="myInput">
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700italic);

html,body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg,  #EA5C54  0%,#bb6dec 100%);
}

#myInput {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0.5em 0.25em;
  border: none;
  border-radius: 0.2em;
  font-size: 1.5em;
  text-align: left;
  box-shadow: 0 0 1em 0.25em rgba(0,0,0,0.2);
}
const myInput = document.getElementById('myInput')

myInput.addEventListener('keypress', function(event){
  this.value = this.value.toUpperCase()
})
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.