Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to disable resizable property of textarea?

    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 681
    Comment on it

    Hi all.

    The <textarea> tag and the <input> are very much similar in terms of their usage. The only difference between the two is : <input> accepts a single line input where as <textarea> accepts a multi-line text input.

    The most interesting feature about the <textarea> is that the size of the input area can be easily adjusted according to the design of the website.

    The size of a text area is specified in terms of cols and rows attributes. For better use, CSS height and width properties can be used too.

    The HTML <textarea> tag allows the user to enter text over multiple rows.

    The two can be differentiated visually also. In the <textarea>, there are 3 dots on the bottom right corner of the input box. These dots indicate the resizeable nature of it.

    But sometimes, one may want to disable this property. Maybe because one may not want a resizeable textarea.

    CSS3 has introduced a new property for elements that will help you do this. This property is the resize property.

    Add the following CSS code to your stylesheet to disable resizing of all textarea elements:   

     

    textarea { 
            resize: none; 
    }

     

    You may have to check the browser compatibility before you use this property. Unfortunately this is only supported by 60% of total browsers today.

     

    Keep Coding!

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: