resize Özelliği

resize özelliği, textarea veya diğer öğelerin boyutlarını değiştirmeyi yasaklar veya izin verir (diğer öğelerle tüm tarayıcılarda çalışmaz).

Sözdizimi

cssseçici {
  resize: both | horizontal | vertical | none;
}

Değerler

Değer	Açıklama
`both`	Öğe genişlik ve yükseklik olarak uzatılabilir.
`horizontal`	Öğe sadece genişlik olarak uzatılabilir.
`vertical`	Öğe sadece yükseklik olarak uzatılabilir.
`none`	Öğenin boyutları değiştirilemez.

Varsayılan değer: none. textarea için bazı tarayıcılarda: both. resize desteği olmayan tarayıcılarda, textarea none değeri atanmış gibi davranır.

Örnek . both Değeri

Öğe her iki yöne doğru uzatılır:

html<textarea></textarea>

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

Результат:

Örnek . horizontal Değeri

Öğe sadece yatay olarak uzatılır:

html<textarea></textarea>

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

Результат:

Örnek . vertical Değeri

Öğe sadece dikey olarak uzatılır:

html<textarea></textarea>

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

Результат:

Örnek . none Değeri

Öğe hiç uzatılamaz:

html<textarea></textarea>

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

Результат:

Örnek . Genişlik ve Yükseklik Sınırlaması

max-width, min-width, max-height, min-height özellikleri ile minimum ve maksimum genişlik ve yükseklik sınırlanabilir:

html<textarea></textarea>

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

Результат: