html - How to make red color input box of error when no content is entered in box but the cursor is still in box using angular js? -

i trying add validation in form using angular js. want whole color of input box red color when there error. issue in form after getting error when removing text , cursor inside box , color of box blue , border of red color, want total box color should red of border well.currently when clicking outside box showing red , need if no text there in box still cursor inside box should showing error whole box red color. using below styling-

.registration-form .has-error .form-control, .registration-form .has-error .form-control:focus, .registration-form .has-error .form-control:hover, .registration-form .has-error .form-control:active{          border-color: red;    box-shadow: none !important;    background-color: red !important; }  .registration-form label{     font-weight: normal; }  .registration-form .form-group input[type="text"]:focus{      background-color:#18b6d6 !important;   } 

can me how can achieve that? have created plunker here-

https://plnkr.co/edit/ffyhrmiovomcyxwsyvuj?p=preview

.registration-form .form-group input[type="text"]:focus{      background-color:#18b6d6; // !important;   } 

just take off !important , works