电子邮件表单CSS和HTML不能很好地工作

I have a site here: http://desertcinema.com/gold/

我在这里有一个网站：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.

即使你将鼠标悬停在鼠标上，我也想让它完全像正常状态。但似乎我的CSS和HTML无法正常工作。

Here's the CSS:

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

如果要检查和诊断，可以使用chrome的INSPECT TOOL。

Thanks in advance

提前致谢

3 个解决方案

#1

Please follow this.

请关注此。

1. open your file: /gold/css/style.css
2. 打开你的文件：/gold/css/style.css
3. Goto line number 108 in file
4. 转到文件中的第108行
5. remove padding: 9px;
6. 删除填充：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;

#2

In style.css this is the piece that is overriding the padding on hover:

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

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

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

尝试这个。