Highlight Text Box

[Vick98]

I am trying to add a code to the additional.css template that will highlight a input text box once you click the box.

Should look like this:




Code I have to work with but isn't working:

.input-text input, .input-textarea textarea {
transition: all 0.30s ease-in-out;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
border:#ffa200 1px solid;
outline:none;
padding: 2px;
border-radius: 5px;
margin: 2px;
border:1px solid rgba(255,162,0, 0.5);
}

.input-text input:focus, .input-textarea textarea:focus {
box-shadow: 0 0 5px 2px rgba(204, 48, 48, 0.8);
-webkit-box-shadow: 0 0 5px 2px rgba(204, 48, 48, 0.8);
-moz-box-shadow: 0 0 5px 2px rgba(204, 48, 48, 0.8);
-o-box-shadow: 0 0 5px 2px rgba(204, 48, 48, 0.8);
-ms-box-shadow: 0 0 5px 2px rgba(204, 48, 48, 0.8);
transition: all 0.30s ease-in-out;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
border:1px solid rgba(255,162,0, 0.8);
}

.input-text, .input-textarea {background: none;
border: 0;}

[Vick98]

Can someone help with this?