Email Form CSS and HTML won't work well - html

Question

I have a site here: http://desertcinema.com/gold/
And I have a form there that doesn't work good especially when you click inside the input tag.
I want to make it exactly like the normal state even when you hover or click your mouse on it. But it seems my CSS and HTML doesnt work that way.
Here's the CSS:
.email-icon i {
font-size: 38px;
line-height: 71px;
}
.contact-form .form-group {
position: relative;
width: 100%;
margin-bottom: 4px !important;
}
.contact-form {
color: #8C8C8C;
float: none;
margin: 0 auto 60px auto;
}
.contact-form input {
background-color: #ffffff;
border: none;
height: 60px;
width: 100%;
padding: 0 22% 0 70px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
color: #dadada;
}
.contact-form .error:focus,
.contact-form .error {
border: 1px solid #ff0000;
background-color: #ffffff;
}
.contact-form label.error {
color: #fff;
font-size: 14px;
line-height: 18px;
font-weight: normal;
position: absolute;
right: 0;
text-transform: none;
top: -28px;
border: none;
background-color: #FF0000;
padding: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.contact-form .email-icon {
position: absolute;
top: -6px;
left: 12px;
font-size: 24px;
}
.contact-form .btn-submit {
font-family: 'Oswald', sans-serif;
position: absolute;
top: 10px;
right: 12px;
font-size: 20px;
border: none;
background-color: #3498db;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-size: 20px;
color: #ffffff;
line-height: 22px;
width: 90px;
height: 40px;
line-height: 24px;
}
You can use chrome's INSPECT TOOL if you want to check and diagnose this.
Thanks in advance

Answer 1

Please follow this.
open your file: /gold/css/style.css
Goto line number 108 in file
remove padding: 9px;
you will have like this,
textarea, input[type="text"], input[type="text"]:hover, input[type="text"]:focus, input[type="text"]:active, input[type="email"], input[type="email"]:hover, input[type="email"]:focus, input[type="email"]:active {
background: none;
box-shadow: none !important;
border: 1px solid #ddd;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
font-weight: 300;
width: 100%;
/* padding: 9px; */
color: #333;
margin-bottom: 20px;

Answer 2

In style.css this is the piece that is overriding the padding on hover:
textarea,
input[type="text"],
input[type="text"]:hover,
input[type="text"]:focus,
input[type="text"]:active,
input[type="email"],
input[type="email"]:hover,
input[type="email"]:focus,
input[type="email"]:active{
background: none;
box-shadow: none !important;
border: 1px solid #ddd;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
font-weight: 300;
width: 100%;
padding: 9px;
color: #333;
margin-bottom: 20px;
}
Updating the attribute values for padding there to the following seemed to work:
textarea,
input[type="text"],
input[type="text"]:hover,
input[type="text"]:focus,
input[type="text"]:active,
input[type="email"],
input[type="email"]:hover,
input[type="email"]:focus,
input[type="email"]:active{
background: none;
box-shadow: none !important;
border: 1px solid #ddd;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
font-weight: 300;
width: 100%;
padding: 0 22% 0 70px;
color: #333;
margin-bottom: 20px;
}
If you want your original setting to stick, I suppose you could always change:
.contact-form input {
background-color: #ffffff;
border: none;
height: 60px;
width: 100%;
padding: 0 22% 0 70px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
color: #dadada;
}
To this:
.contact-form input {
background-color: #ffffff;
border: none;
height: 60px;
width: 100%;
padding: 0 22% 0 70px !important;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
color: #dadada;
}

Answer 3

.contact-form:focus,.contact-hover:focus{
background-color: #ffffff;
border: none;
height: 60px;
width: 100%;
padding: 0 22% 0 70px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
color: #dadada;
}
Try this.