evangalen · December 23, 2015 18:19
diff --git a/app.js b/app.js
 angular.module('plunker', []);
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="http://code.angularjs.org/1.2.1/angular.js" data-semver="1.2.1"></script>
    <script src="app.js"></script>
  </head>
 
  <body ng-app="plunker">
    <div ng-init="letters='1'">
      letters = {{'' + letters}}<br>
      <input type="text" ng-model="letters" ng-pattern="/^[a-zA-Z]*$/" />
    </div>
  </body>
 </html>
diff --git a/style.css b/style.css
 style.css
 input.ng-invalid:focus {
    border-color: #E9322D;
    box-shadow: 0 0 6px #F8B9B7;
 }
 
 input.ng-invalid:not(:focus) {
    background-color: #FA787E;
 }

 input.ng-pristine.ng-invalid-required {
    background-color: white;
 }
	<!DOCTYPE html>
	<html>
	<head>
	<link rel="stylesheet" href="style.css" />
	<script data-require="[email protected]" src="http://code.angularjs.org/1.2.1/angular.js" data-semver="1.2.1"></script>
	<script src="app.js"></script>
	</head>

	<body ng-app="plunker">
	<div ng-init="letters='1'">
	letters = {{'' + letters}}<br>
	<input type="text" ng-model="letters" ng-pattern="/^[a-zA-Z]*$/" />
	</div>
	</body>
	</html>
	style.css
	input.ng-invalid:focus {
	border-color: #E9322D;
	box-shadow: 0 0 6px #F8B9B7;
	}

	input.ng-invalid:not(:focus) {
	background-color: #FA787E;
	}

	input.ng-pristine.ng-invalid-required {
	background-color: white;
	}