html - tamanho - textarea resize




Como desativar a propriedade redimensionável da textarea? (11)

A seguinte regra CSS desabilita o comportamento de redimensionamento de elementos textarea :

textarea {
  resize: none;
}

Para desativá-lo para algumas (mas não todas) textarea s, existem algumas opções .

Para desabilitar uma área de textarea específica com o atributo name definido como foo (ou seja, <textarea name="foo"></textarea> ):

textarea[name=foo] {
  resize: none;
}

Ou, usando um atributo id (por exemplo, <textarea id="foo"></textarea> ):

#foo {
  resize: none;
}

A página W3C lista valores possíveis para redimensionar restrições: nenhum, ambos, horizontal, vertical e herdam:

textarea {
  resize: vertical; /* user can resize vertically, but width is fixed */
}

Revise uma página de compatibilidade decente para ver quais navegadores suportam atualmente esse recurso. Como Jon Hulka comentou, as dimensões podem ser mais restringidas no CSS usando max-width, max-height, min-width e min-height.

Super importante saber:

Esta propriedade não faz nada a menos que a propriedade overflow seja algo diferente de visible, que é o padrão para a maioria dos elementos. Então, geralmente, para usar isso, você terá que definir algo como estouro: scroll;

Citação de Chris Coyier, http://css-tricks.com/almanac/properties/r/resize/

Desejo desabilitar a propriedade redimensionável de uma área de textarea .

Atualmente, posso redimensionar uma área de textarea clicando no canto inferior direito da área de textarea e arrastando o mouse. Como posso desabilitar isso?


Adicionando! Importante faz funcionar:

width:325px !important; height:120px !important; outline:none !important;

esboço é apenas para evitar o contorno azul em determinado navegador


Com @style , você pode dar um tamanho personalizado e desabilitar o recurso de (resize: none;) .

@Html.TextAreaFor(model => model.YourProperty, new { @style = "width: 90%; height: 180px; resize: none;" })

Em CSS ...

textarea {
    resize: none;
}

Isso pode ser feito em html fácil

<textarea name="textinput" draggable="false"></textarea>

Isso funciona para mim. O valor padrão é true para o atributo draggable .


O CSS3 pode resolver esse problema. Infelizmente, ele é suportado apenas em 60% dos navegadores usados hoje em dia.

Para IE e iOS, você não pode desativar o redimensionamento, mas pode limitar a dimensão textarea definindo sua width e height .

/* One can also turn on/off specific axis. Defaults to both on. */
textarea { resize:vertical; } /* none|horizontal|vertical|both */

Ver demonstração


Para desabilitar o redimensionamento de todas as textarea

textarea {
    resize: none;
}

Para desabilitar o redimensionamento de uma área de textarea específica Adicione um name atributo ou um id e configure-o para algo. Neste caso, é nomeado noresize

<textarea name='noresize' id='noresize'> </textarea>

CSS

/*  using the attribute name */
textarea[name=noresize]{
resize: none;
}
/* or using the id */

#noresize{
resize: none;
}

Se você precisar de suporte profundo, você pode usar a técnica da velha escola

textarea {
    max-width:/*desired fixed width*/ px;
    min-width:/*desired fixed width*/ px;
    min-height:/*desired fixed height*/ px;
    max-height:/*desired fixed height*/ px;
}

Você pode tentar com jQuery também

$('textarea').css("resize", "none");

Você simplesmente usa: resize: none; no seu CSS.

A propriedade resize especifica se um elemento é ou não redimensionável pelo usuário.

Nota: A propriedade de redimensionamento se aplica a elementos cujo valor de estouro calculado é algo diferente de "visível".

Também redimensionar não suportado no IE no momento.

Aqui estão as diferentes propriedades para redimensionar:

Sem redimensionar:

textarea { 
  resize: none; 
}

Redimensione os dois lados (vertical e horizontalmente):

textarea { 
  resize: both; 
}

Redimensionar verticalmente:

textarea { 
  resize: vertical; 
}

Redimensionar horizontalmente:

textarea { 
  resize: horizontal; 
}

Além disso, se você tiver width e height em seu CSS ou HTML, isso impedirá que sua área de texto seja redimensionada, com um suporte mais amplo a navegadores.


<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>




css