Question

我是WordPress的新手。我使用了插件联系表7，我需要调整其字段宽度。现在它的宽度是100％。

通过做一些谷歌，我开始知道我需要为此编辑自定义CSS，我添加了这些行，但仍然没有

input[type="text"]
{
background-color: #fff;
color: #000;
width: 50%;
}

我正在使用avada主题

Answer 1

检查浏览器上的文本字段，并根据范围将相同的样式应用于分配给输入的类。我认为联系表单输入通常有一个类名“输入”。这样的事可能会有所帮助

.et_pb_contact p input
{
background-color: #fff;
color: #000;
width: 50%;
}

Answer 2

input[type=text], #respond textarea, .post-password-form input[type=password], .wpcf7-form-control.wpcf7-date, .wpcf7-form-control.wpcf7-number, .wpcf7-form-control.wpcf7-quiz, .wpcf7-form-control.wpcf7-select, .wpcf7-form-control.wpcf7-text, .wpcf7-form-control.wpcf7-textarea {
    width: 59%;
    margin-bottom: 24px;
    padding: 17px 30px;
    border: 1px solid #ccc;
    outline: 0;
    font-size: 15px;
    color: #797979;
    font-family: "Crimson Text",serif;
    -webkit-appearance: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

您必须以百分比更改“width”元素。

Answer 3

它可能不起作用，因为插件css样式被其他样式覆盖。您可能需要将!important添加到属性中，如下所示。

input[type="text"] {
  background-color: #fff;
  color: #000;
  width: 50% !important;
}

通常不建议您参阅此文章https://uxengineer.com/css-specificity-avoid-important-css/。

最好的方法是在CSS样式之前添加一个类或ID，以将样式仅应用于该元素。请参阅下面的完整代码：

#form_container_with_contact_form input[type="text"] {
    background-color: #fff;
    color: #000;
    width: 50%;
}

以联系人形式7调整文本字段的宽度

3 个答案: