Easy to grasp the usage of the resize attribute in CSS3

CSS 3 resize attribute has been added, the properties allow the size of the user to modify the elements by means of drag. Had the resize should be translated to zoom, but in the actual test through the resize attribute can be realized on the basis of wide high tensile effect only, and cannot be achieved, and scaling to less than the width of high effect.

[note] IE browser does not support the resize attribute.

Closely tied to resize and overflow, only when the elements of the overflow property value is not visible, resize to be effective

Like in the textarea tag, its kernel browser will resize by default values for both, the user can adjust the width and height of the element. The following figure is the textarea default display in Google chrome, textarea one can control the zoom button and the bottom right hand corner.

Under normal circumstances, the textarea were fixed width and height, if you don’t want to let its arbitrary scaling, you can add the resize for the textarea: none of CSS properties. So you can remove its kernel browser’s default display.

The textarea resize attribute values in set to vertical, this is to allow the user can adjust the height, this page will not be deformation.

[note] because the textbox itself has overflow: auto attribute, so bring the resize attribute

Value: none | both | horizontal | vertical

The initial value: none

Applied in: block-level elements, replacing elements, a table cell

Inheritance: no

None: users can’t adjust the element size

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

Horizontal: users can adjust the width of the element

Such as:

 
    <textarea name="Remarks" rows="2" cols="20" id="Remarks" class="textBox" onfocus="this.className='textBoxOver';myfocus()"  
                          onblur="this.className='textBox';myblur();"  
 
        style="height: 60px; width: 86%;max-height: 60px;max-width:420px; resize=none;">
 
    Special requirements identified here, please
    </textarea>

No Comments

Leave a Reply