電子郵件形式CSS和HTML將無法正常工作

我這裏有一個網站：http://desertcinema.com/gold/電子郵件形式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的INSPECT的工具，如果您要檢查和診斷此。

在此先感謝

來源

2016-07-23 Mikk Poles

請檢查下面 – eronax59

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

試試這個。

來源

2016-07-23 03:59:21

我的答案都能跟得上抱歉，沒有工作。 –

您是否在Chrome或Firefox上使用了檢查元素工具？ –

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

來源

2016-07-23 04:45:01 topdog

它實際上修復了它但是如何在懸停模式下堅持使用相同的設計？如白色背景等等。 –

那麼你只是在兩組屬性之間發生衝突。如果你只是想爲這個郵箱應用一種風格，也許另一個解決方案可以用來代替這個郵件箱，這個方法就是徹底刪除這一行：（輸入提前輸入不好意思）輸入[type =「email」]：hover， – topdog

甚至可能把所有這些如果他們引起衝突，就會出來（注意到當我點擊郵箱時白盒消失，如果我留下了其他人的話，簡單的'閃現'）：'input [type =「email」]， input [type =「email」]：hover， input [type =「email」]：focus， input [type =「email」]：active' – topdog

請按照此。

打開文件：/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;

來源

2016-07-23 04:49:30 eronax59

電子郵件形式CSS和HTML將無法正常工作

回答

相關問題