不尊重输入“大小”属性答案

【问题标题】：input "size" attribute not respected不尊重输入“大小”属性
【发布时间】：2013-09-22 17:45:50
【问题描述】：

我正在设计一个页面以添加到一个用 Wordpress 构建的网站。我正在使用 Wordpress 的 Contact Form 7 插件创建一个可以通过电子邮件提交的插件。现在，联系表格允许您设置文本框的大小，我已经设置了它们，例如到size="5" 但是，经过测试的浏览器（Chrome 和 Firefox）似乎都不尊重大小，为什么我想知道，我该如何解决这个问题？页面的临时 url 是：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>

【问题讨论】：

标签： html wordpress forms size

【解决方案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; }

希望对你有帮助！

【讨论】：