电子邮件格式CSS和HTML赢得'；工作不好

我在这里有一个网站：

我有一个表单，它不太好用，尤其是当你点击输入标签的时候

我想让它完全像正常状态一样，即使你在上面悬停或点击鼠标。但我的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的检查工具

提前谢谢

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

---

试试这个

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

请跟我来

打开文件：/gold/css/style.css

转到文件中的第108行

去除填料：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;

---

您是否在chrome或firefox上使用了inspect element工具？请在下面检查我的答案，并实际修复它。但是，在悬停模式下，我如何坚持使用相同的设计？例如白色背景等等。你只是在两组属性之间有冲突。如果您只想应用此电子邮件框的一种样式，则可以使用另一种解决方案，即完全删除此行：（过早地按enter抱歉）输入[type=“email”]：悬停，如果它们导致冲突，甚至可能将所有这些内容都删除（注意到一个简短的“闪光”，当我点击邮箱时，白色框消失了，例如，如果我留下了一些其他框）：

input[type=“email”]，input[type=“email”]：悬停，input[type=“email”]：焦点，input[type=“email”]：active