Question

我正在设计一个页面，以添加到Wordpress内置的网站。我正在使用Wordpress的 Contact Form 7 插件创建一个可以通过电子邮件提交的插件。现在，联系表单允许您设置文本框的大小，我已设置它们，例如到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>

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

我希望有所帮助！

输入“大小”属性不受尊重

1 个答案: