Email Форма CSS и HTML не будет работать хорошо

Question

У меня есть сайт здесь: http://desertcinema.com/gold/

И у меня есть форма, что там не работает хорошо, особенно если щелкнуть внутри входного тега.

Я хочу, чтобы сделать это так же, как в нормальном состоянии, даже при наведении или щелкнуть мышью на нем. Но, похоже, мой CSS и HTML не работают таким образом.

Вот 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; 
} 

Вы можете использовать Chrome, осматривайте, если вы хотите, чтобы проверить и диагностировать это.

Заранее спасибо

Answer 1

.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; 
} 

Попробуйте это.

Answer 2

В style.css это часть, которая перекрывая отступы по наведению:

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; 
} 

Обновление значений атрибутов для заполнения там к следующему, казалось, работали:

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; 
} 

Если вы хотите, чтобы ваши первоначальные настройки придерживались, я полагаю, вы всегда можете изменить:

.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 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

Следуйте за этим.

1. открыть файл: /gold/css/style.css
2. Goto номер строки 108 в файле
3. удалить утеплитель: 9px;

вы будете иметь, как это,

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;