Question

我正在使用以下网站http://fuel.social上的联系表单的后续代码，我指定的大部分样式（如border-width和color）都不适用。非常感谢提示。

非常感谢你的时间！

img.ajax-loader { display: none; }

div.wpcf7-response-output, div.wpcf7-validation-errors { display: none           !important; }
span.wpcf7-not-valid-tip { display: none; }

.wpcf7-textarea,
.wpcf7-email {
border-width: 2px;
border-style: solid;
border-color: #E8E8E8;
-webkit-appearance: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-style: italic;
}

以下是联系表格中的代码：

<div id="form-container">
    LEAVE US A MESSAGE
    <br>
    <div class="row">
    <div class="form-group">[textarea* textarea-533 5/360 your-email placeholder "A maximum of 360 characters"]</div>
    <br>
    <div class="col-md-6 form-group">[email* email-104 class:form control placeholder "Your email address"]</div>
    </div>
    <br>
    <div class="form-group">[submit class:btn class:btn-primary "Send"]        </div>
    </div>

Answer 1

它被覆盖：

.site-content div.wpcf7 input[type="text"],
.site-content div.wpcf7 input[type="email"],
.site-content div.wpcf7 textarea {
  background: none repeat scroll 0 0 #fff;
  border: 1px solid #ddd;
  color: #000;
  display: block;
  font-family: "courier-prime",monospace;
  font-size: 1rem;
  line-height: 1.5;
  margin: 3px 0 0;
  padding: 6px 2% 5px;
  text-align: left;
  width: 100%;
}

在相同的样式文件之前几百行，因为这个（css）选择器更具体并且开始。

编辑：没有真正覆盖，但对已经设置的属性进行了某种部分忽略;）

您需要为文本，文本区域和电子邮件字段（例如ID）使用相同或更好的更精确的选择器

Answer 2

它们不适用，因为在div.wpcf7输入中重新定义了此属性[type ='email']

为您的班级添加！important或为该元素使用其他选择器。

Answer 3

检查控制台并突出显示输入以查看要覆盖的样式。确保样式位于样式表的末尾，或者您可以在第1724行的样式表中替换它当前所在的样式：

例如，这是textarea，文本输入和电子邮件输入的css选择器（第1724行）：

 .site-content div.wpcf7 input[type="text"], 
 .site-content div.wpcf7 input[type="email"], 
 .site-content div.wpcf7 textarea {
 /* place your styles here */
 }

如果您想要分开其中任何一个，请执行以下操作：

 .site-content div.wpcf7 input[type="text"]
 /* place your styles for text input here */
 }

 .site-content div.wpcf7 input[type="email"] {
 /* place your styles for email input here */
 }

 .site-content div.wpcf7 textarea {
 /* place your styles for text area here */
 }

...最佳

Answer 4

第1724行的规则将被应用，因为.site-content div.wpcf7 textarea的选择器比.wpcf7-textarea更强。

你最好选择器来覆盖第1724行的规则，例如。 .site-content .wpcf7-form .wpcf7-textarea以避免在样式表中使用!important。

Answer 5

将!important添加到您的班级

border-width: 2px !important;

CSS样式不会生效

5 个答案: