resize प्रॉपर्टी

resize प्रॉपर्टी textarea या अन्य एलिमेंट्स के आकार बदलने की अनुमति देती है या प्रतिबंधित करती है (अन्य एलिमेंट्स के साथ सभी ब्राउज़रों में काम नहीं करती)।

सिंटैक्स

cssसेलेक्टर {
  resize: both | horizontal | vertical | none;
}

वैल्यूज

डिफॉल्ट वैल्यू: none। कुछ ब्राउज़रों में textarea के लिए: both। जिन ब्राउज़रों में resize का सपोर्ट नहीं है, वहां textarea ऐसे बर्ताव करेगा जैसे none वैल्यू सेट की गई हो।

उदाहरण . both वैल्यू

एलिमेंट दोनों दिशाओं में खिंचता है:

html<textarea></textarea>

csstextarea {
  resize: both;
  width: 200px;
  height: 200px;
}

Результат:

उदाहरण . horizontal वैल्यू

एलिमेंट केवल क्षैतिज रूप से खिंचता है:

html<textarea></textarea>

csstextarea {
  resize: horizontal;
  width: 200px;
  height: 200px;
}

Результат:

उदाहरण . vertical वैल्यू

एलिमेंट केवल लंबवत रूप से खिंचता है:

html<textarea></textarea>

csstextarea {
  resize: vertical;
  width: 200px;
  height: 200px;
}

Результат:

उदाहरण . none वैल्यू

एलिमेंट बिल्कुल नहीं खिंचता:

html<textarea></textarea>

csstextarea {
  resize: none;
  width: 200px;
  height: 200px;
}

Результат:

उदाहरण . चौड़ाई और ऊंचाई पर प्रतिबंध

max-width, min-width, max-height, min-height प्रॉपर्टीज की मदद से न्यूनतम और अधिकतम चौड़ाई और ऊंचाई को प्रतिबंधित किया जा सकता है:

html<textarea></textarea>

csstextarea {
  resize: both;
  min-height: 100px;
  max-height: 300px;
  min-width: 100px;
  max-width: 300px;
}

Результат: