1

我正在设计一个页面以添加到在 Wordpress 中构建的网站。我正在使用 Wordpress 的Contact Form 7插件创建一个可以通过电子邮件提交的插件。现在，Contact Form 允许您设置文本框的大小，我已将它们设置为例如，size="5"但是，经过测试的浏览器（Chrome 和 Firefox）似乎都不尊重大小，为什么我想知道，我该怎么做解决这个问题？该页面的临时网址是：http ://www.dustbites.com/estimate-sheet-2/我的联系表格的 Wordpress 源代码如下：

<p>Customer: [text* Customer 30/]</p>
<p>Address: [text* Address 20/] Buzz: [text Buzz 5/5]</p>
<p>Res:[text* Res 10/10] Bus: [text Bus /10] Cell: [text Cell 10/10] Fax: [text Fax 10/10]</p>
<p>Bill To: [text Bill 10/10]</p>
<p>How did you find out about us:[checkbox Findout "Yellow Pages" "BBB" "Referral" "Internet"] Other: [text Other 15/15]</p>
4

1 回答 1

1

似乎每当插件呈现您的代码时[text Bus /10]，它都会添加 CSS 类.wpcf7-text，将您的输入宽度设置为相对元素宽度的 75%。

基本上，要让 HTML 属性size在您的输入上起作用，您需要：

1）覆盖默认.wpcf7-text类

添加到您网站主题的 CSS 文件：

.wpcf7-text { width: auto!important; }

我不会说这是最好的选择，因为这将为使用插件生成的此类的所有输入覆盖此属性。

或者——更好的是——你可以

2）生成您的自定义类并应用于您的输入

同样，在您网站主题的 CSS 文件中，添加：

/* You may pick the best class name that suits you */
.my-custom-width-class { width: auto!important; }

为此，请将class:属性添加到您的自定义表单输入中，例如：

[text Bus /10 class:my-custom-width-class]

此外，在您的输入中有自己的类，您可以通过 CSS 类手动设置它们的宽度，丢弃size属性，如下所示：

.my-custom-width-class { width: 240px!important; }

我希望这会有所帮助！

于 2013-09-18T05:41:45.500 回答