Question

我在那里有一个表格不会很好，特别是当你点击输入标签时。

即使您将鼠标悬停在其上或鼠标上，我也希望它与正常状态完全相同。但似乎我的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的INSPECT TOOL。

提前致谢

Answer 1

在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 2

请关注此事。

打开您的文件：/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;

Answer 3

s = requests.Session()

s.get('http://httpbin.org/cookies/set/sessioncookie/123456789')
r = s.get('http://httpbin.org/cookies')

print(r.text)
# '{"cookies": {"sessioncookie": "123456789"}}'

试试这个。

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

3 个答案: