调整联系人表单中文本字段的宽度 7

Question

我是 WordPress 的新手。我使用了一个插件 contact form 7，我需要调整它的字段宽度。现在它是 100% 宽度。

通过谷歌搜索，我知道我需要为此编辑自定义 CSS，我添加了这些行，但仍然一无所获

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

我正在使用avada主题

Answer 1

我已经用这个解决了问题：

.wpcf7-form.init label{width:100%; max-width:inherit;}

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

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

Answer 3

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

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

Answer 4

它可能不起作用，因为插件

css

样式被其他样式覆盖。您可能需要将

!important

添加到您的属性中，如下所示。

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

这通常不推荐看这篇文章https://uxengineer.com/css-specificity-avoid-important-css/.

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

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

Answer 5

如果你想将所有字段调整为 100% 宽度，你可以简单地使用这个 css:

input {
 width: 100%;
}

如果需要指定某些字段：

input[type="text"] {
 width: 100%;
}

如提到，有一个造型指南。

Answer 6

以下示例适用于Contact form 7 Wordpress - 内部表单编辑部分 - 使用 "80/" 或 "40/" 取决于您想要的大小 或者 80x10 用于文本区域

<label> name
    [text* your-name autocomplete:name **80/**] </label>

<label> email
    [email* your-email autocomplete:email **80/**] </label>

<label> subject
    [text* your-subject **80/**] </label>

或

<label> name
    [text* your-name autocomplete:name **80/**] </label>

<label> email
    [email* your-email autocomplete:email **80/**] </label>

<label> subject
    [text* your-subject **80x10**] </label>