We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

A propriedade CSS resize deixa você controlar o redimensionamento de qualquer elemento.
/* valores chave */
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;

/* valores globais */
resize: inherit;
resize: initial;
resize: unset;

Initial valuenone
Aplica-se aelements with overflow other than visible, and optionally replaced elements representing images or videos, and iframes
Inheritednão
Midiavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Sintaxe

Valores

none
The element offers no user-controllable method for resizing the element.
both
The element displays a mechanism for allowing the user to resize the element, which may be resized both horizontally and vertically.
horizontal
The element displays a mechanism for allowing the user to resize the element, which may only be resized horizontally.
vertical
The element displays a mechanism for allowing the user to resize the element, which may only be resized vertically.
block
Depending on the writing-mode and direction value, the element displays a mechanism for allowing the user to resize the element either horizontally or vertically in block direction.
inline
Depending on the writing-mode and direction value, the element displays a mechanism for allowing the user to resize the element either horizontally or vertically in inline direction.
Note: resize does not apply to blocks for which the overflow property is set to visible.

Sintaxe formal

none | both | horizontal | vertical

Exemplos

Desabilitando redimensionamento em textareas

CSS

Por padrão, <textarea> são elemento redimensionáveis em Gecko 2.0 (Firefox 4). Você consegue sobrepor este comportamento com o CSS mostrado abaixo:

textarea.exemplo {
 resize: none; /* redimensionamento desabilitado */
}

HTML

<textarea class="exemplo">Type some text here.</textarea>

Resultado

Usando resize com elemento arbitrários

Você pode usar a propriedade resize para fazer qualquer elemento redimensionavel. Neste exemplo abaixo, um container redimensionavel <div> contém um paragrafo redimensionavel (<p> element):

CSS

.resizable {
  resize: both;
  overflow: scroll;
  border: 1px solid black;
}

div {
  height: 300px;
  width: 300px;
}

p {
  height: 200px;
  width: 200px;
}

HTML

<div class="resizable">
  <p class="resizable">
    Este paragrafo é redimensionado, por causa de propriedade CSS resize definida como 'both' neste elemento.
  </p>
</div>

Resultado

Especificação

Especificação Status Comentário
CSS Logical Properties and Values Level 1
The definition of 'resize' in that specification.
Rascunho editorial Adiciona o valor block e inline.
CSS Basic User Interface Module Level 3
The definition of 'resize' in that specification.
Recomendação proposta Definição inicial

Compatibilidade de browser

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Recurso Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Suporte básico (on <textarea>) 1.0 4.0 (2.0)-moz ? 12.1 3.0 (522)
On any block-level and replaced element, table cell, and inline block element (unless overflow is visible) 4.0 5.0 (5.0)[1] ? 15 4.0
Recurso Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Suporte básico (on <textarea>) ? ? ? ? ?
On any block-level and replaced element, table cell, and inline block element (unless overflow is visible) ? ? ? ? ?

[1] resize não tem nenhum efeito em <iframe> (cf. bug 680823)

Veja também

Etiquetas do documento e colaboradores

Colaboradores desta página: FLR, brunoaugustosilva
Última atualização por: FLR,