css textarea_使用CSS自定义Textarea大小调整

css textarea

Webkit-based web browsers like Safari and Chrome have led web innovation the past few years.  Whether its implementing new JavaScript APIs, providing more CSS capabilities than other browsers, or simply providing blazing-fast page rendering, WebKit has been head and shoulders above other browsers in page control and CSS features.  One of those subtle features is the ability to control textarea resizing.  FireFox will provide this same capability in Firefox 4.  Let me show how to control textarea resizing with CSS.

过去几年中，基于Webkit的网络浏览器(例如Safari和Chrome)引领了网络创新。 无论是实现新JavaScript API，提供比其他浏览器更多CSS功能，还是仅提供快速的页面呈现，WebKit在页面控制和CSS功能方面一直领先于其他浏览器。 这些微妙的功能之一是控制文本区域大小调整的能力。 FireFox将在Firefox 4中提供相同的功能。让我展示如何使用CSS控制文本区域的大小调整。

CSS (The CSS)

Textarea resize control is available via the CSS3 resize property:

可通过CSS3 resize属性使用Textarea调整大小控件：

textarea { resize:both; } /* none|horizontal|vertical|both */
textarea.vert { resize:vertical; }
textarea.noResize { resize:none; }

Allowable values self-explanatory:  none (disables textarea resizing), both, vertical and horizontal.  The default in Firefox, Safari, and Chrome is both.

允许值不言自明的： none (禁用textarea的调整大小)， both ， vertical和horizontal 。 Firefox，Safari和Chrome中的默认值both 。

If you want to constrain the width and height of the textarea element, that's not a problem:  these browsers also respect max-height, max-width, min-height, and min-width CSS properties to provide resizing within certain proportions:

如果要限制textarea元素的宽度和高度，这不是问题：这些浏览器还遵循max-height ， max-width ， min-height和min-width CSS属性，以按一定比例提供大小调整：

#confinedSpace textarea { resize:vertical; max-height:300px; min-height:200px; }
#confinedSpace textarea.horiz { resize:horizontal; max-width:400px; min-width:200px; }

Textarea resizing is hugely helpful when you're looking to post a long message.  Of course sometimes you may want to disable textarea resizing to accommodate a design, and that's fine too.  As a general rule, however, you should allow resizing.

当您要发布长消息时，调整Textarea的大小非常有用。 当然，有时您可能需要禁用textarea调整大小以适应设计，这也很好。 但是，通常应允许调整大小。

翻译自: https://davidwalsh.name/textarea-resize

css textarea