Shulou(Shulou.com)05/31 Report--

This article focuses on "how to use the resize attribute in CSS3". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor learn how to use the resize attribute in CSS3.

CSS3 adds the resize attribute, which allows the user to drag to modify the size of the element. Originally, resize should be translated as zoom, but in the actual test, the resize property can only achieve the stretching effect on the basis of width and height, but can not achieve the effect of zooming to less than width and height.

[note] IE browsers do not support the resize attribute.

Resize is closely related to overflow, and resize works only when the value of the overflow attribute of an element is not visible

For example, in the textarea tag, the browser of the Webkit kernel defaults to both, which means that the user can adjust the width and height of the element. As shown in the following figure, the default display of textarea in Google chrome is that there is a button in the lower right corner of textarea that can control zooming.

In general, textarea is fixed in width and height, and if you don't want to scale it freely, you can add the css attribute of resize:none to textarea. This removes the default display of browsers in the Webkit kernel.

Set the property value of resize in textarea to vertical, which allows the user to only adjust the height so that the page is not deformed.

[note] because the text box itself has the property of overflow:auto, it comes with the resize attribute.

Value: none | both | horizontal | vertical

Initial value: none

Apply to: block-level elements, replacement elements, table cells

Inheritance: none

None: the user cannot resize the element

Both: the user can adjust the width and height of the element

Horizontal: the user can only adjust the width of the element

For example:

Please indicate the special requirements here. I believe you have a deeper understanding of "how to use the resize attribute in CSS3". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.