In my css code snippet, I have defined the styling for a registration form which includes various rules for different elements like input fields, labels, and text areas.
.register {
width: 400px;
margin: 10px auto;
padding: 10px;
border: 1px solid #FAFAFA;
border-radius: 10px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #444;
background-color: #f0f0f0;
box-shadow: 0 0 1px 0 #000000;
}
.register h3 {
margin: 0 15px 20px;
border-bottom: 1px solid #909090;
padding: 5px 10px 5px 0;
font-size: 1.1em;
}
.register div {
margin: 0 0 15px 0;
border: none;
}
.register label {
display: inline-block;
width: 25%;
text-align: right;
margin: 10px;
}
.register input[type=text], .register input[type=password] {
width: 65%;
font-family: "Lucida Grande","Lucida Sans Unicode",Tahoma,Sans-Serif;
padding: 5px;
font-size: 0.9em;
border-radius: 5px;
background: rgba(0, 0, 0, 0.07);
}
.register input[type=text]:focus, .register input[type=password]:focus {
background: #FFFFFF;
}
.register textarea{
width: 65%;
font-family: "Lucida Grande","Lucida Sans Unicode",Tahoma,Sans-Serif;
padding: 5px;
font-size: 0.9em;
border-radius: 5px;
background: rgba(0, 0, 0, 0.07);
}
div.textarea > * {
vertical-align:middle
}
I am looking for assistance in making the background of the text-area field change to white when focused, similar to the behavior of other input fields in the form.
You can view the current form in action on the Fiddle Demo I have provided.
Any help with this issue would be greatly appreciated. Thank you in advance.