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

Question

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

基本上，为了使size属性在输入上工作，您需要：

覆盖默认的.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; }

我希望这能帮上忙！