css - 如何改变CF7的宽度？

Question

我无法将表单域的宽度更改为 100%。我认为这是因为主题代码已损坏...

这是我的代码:

.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar, .wpcf7-form-control-wrap {
background-color:rgba(255, 255, 255) !important;
border: none !important;
width: 100% !important;
border-radius: 0 !important;
font-size: 16px;
font-weight: 500;
color: #1c1c1c !important;
padding: 16px !important;
box-sizing: border-box;
}
.wpcf7-submit {
color: #fff;
background-color: #414141 !important;
margin: 8px auto 0;
font-family: Francois One, latin;
font-size: 30px;
font-weight: 500;
border-color: #414141 !important;
border-bottom: 3px solid rgb(163, 163, 163)!important;
border-left: #414141 !important;
border-right: #414141 !important;
border-radius: 8px;
padding: 6px 60px;
line-height: 1.7em;
box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.4);
}
.wpcf7-submit:hover { 
background-color:rgba(78, 78, 78) !important; 
border-width: 2px !important;
border-color:  #494949 !important;
border-bottom: 3px solid rgb(163, 163, 163)!important;
border-left: #4e4e4e !important;
border-right: #4e4e4e !important;
border-radius: 8px;
padding: 6px 0px !important;

}
span.wpcf7-list-item { display: block; }

这是网站的链接:

https://ptbydimitri.de/so-geht-es-weiter/

如您所见，表单字段的宽度不像发送按钮那样为 100%。

希望有人能帮忙!

Answer 1

您的 input 标签位于 label 标签内，您必须将标签的宽度更改为 100% 才能使其正常工作。

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