¿Cómo desactivo la propiedad redimensionable de un área de texto?

2650

Quiero deshabilitar la propiedad redimensionable de a textarea.

Actualmente, puedo cambiar el tamaño de un textareahaciendo clic en la esquina inferior derecha textareay arrastrando el mouse. ¿Cómo puedo desactivar esto?

html css

— usuario549757
fuente

44

@JDIsaaks: además, permitir el cambio de tamaño en ciertas situaciones puede romper el diseño y la capacidad de impresión (un aspecto importante de un proyecto actual de misión crítica).

— random_user_name el

10

A veces realmente quieres un área de texto no redimensionable. Por ejemplo, en este caso, cuando estás (condicionalmente) convirtiendo un área de texto en algo que solo parece una etiqueta. Parece realmente extraño tener una etiqueta con un capturador flotante aleatorio a un lado.

— neminem

2

Por amor a todo lo que es bueno, no hagas esto en un área de texto real o alienarás a tus usuarios avanzados. Romper la funcionalidad del núcleo del navegador debe considerarse una opción nuclear.

— superluminario

3532

La siguiente regla CSS deshabilita el comportamiento de cambio de tamaño de los textareaelementos:

textarea {
  resize: none;
}

Para deshabilitarlo por algunos (pero no por todos) textarea, hay un par de opciones .

Para deshabilitar un específico textareacon el nameatributo establecido en foo(es decir, <textarea name="foo"></textarea>):

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

O, usando un idatributo (es decir, <textarea id="foo"></textarea>):

#foo {
  resize: none;
}

La página W3C enumera los valores posibles para cambiar el tamaño de las restricciones: ninguno, ambos, horizontal, vertical y heredar:

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

Revise una página de compatibilidad decente para ver qué navegadores admiten actualmente esta función. Como Jon Hulka ha comentado, las dimensiones pueden restringirse aún más en CSS utilizando max-width, max-height, min-width y min-height.

Súper importante saber:

Esta propiedad no hace nada a menos que la propiedad de desbordamiento sea diferente a la visible, que es el valor predeterminado para la mayoría de los elementos. En general, para usar esto, tendrá que configurar algo como desbordamiento: desplazamiento;

Cita de Sara Cope, http://css-tricks.com/almanac/properties/r/resize/

— Rosquilla
fuente

¿Existe una solución para Firefox, Opera y / o IE?

— Šime Vidas

66

@ Šime IE y FF3 (y versiones anteriores) no agregan soporte para cambiar el tamaño, por lo que no se necesita una solución para ellos. Para FF4, esta solución debería funcionar.

— Donut

24

según davidwalsh.name/textarea-resize - use resize : vertical o resize: horizontal para restringir el cambio de tamaño a una dimensión. O utilice cualquiera de max-width, max-height, min-width y min-height.

— Jon Hulka

3

¿Soy el único que encuentra extraño configurar esto usando CSS y no atributos? ¿Por qué no puedo establecer propiedades deshabilitadas o marcadas u otras usando CSS ...

— Buksy

66

@Buksy Porque "deshabilitado" es un estado, no una propiedad visual. Por lo tanto, es lógico que no se decida por un lenguaje de estilo .

— Kroltan

206

En CSS ...

textarea {
    resize: none;
}

— Jeff Parker
fuente

105

Encontré dos cosas:

primero

textarea{resize: none}

Este es un CSS 3, que aún no se ha lanzado , compatible con Firefox 4 (y posterior), Chrome y Safari .

Otra característica del formato es overflow: autodeshacerse de la barra de desplazamiento derecha, teniendo en cuenta el atributo dir .

Código y diferentes navegadores

HTML básico

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <textarea style="overflow:auto;resize:none" rows="13" cols="20"></textarea>
</body>
</html>

Algunos navegadores

Internet Explorer 8

Ingrese la descripción de la imagen aquí

Firefox 17.0.1

Ingrese la descripción de la imagen aquí

Cromo

Ingrese la descripción de la imagen aquí

— Rami Jamleh
fuente

62

CSS 3 tiene una nueva propiedad para los elementos de la interfaz de usuario que le permitirá hacer esto. La propiedad es la propiedad de cambio de tamaño . Por lo tanto, agregaría lo siguiente a su hoja de estilo para deshabilitar el cambio de tamaño de todos los elementos del área de texto:

textarea { resize: none; }

Esta es una propiedad CSS 3; use una tabla de compatibilidad para ver la compatibilidad del navegador.

Personalmente, me resultaría muy molesto tener el cambio de tamaño desactivado en elementos de área de texto. Esta es una de esas situaciones en las que el diseñador está tratando de "romper" al cliente del usuario. Si su diseño no puede acomodar un área de texto más grande, es posible que desee reconsiderar cómo funciona su diseño. Cualquier usuario puede agregar textarea { resize: both !important; }a su hoja de estilo de usuario para anular su preferencia.

— James Sumners
fuente

Pero ese sería el usuario que rompe intencionalmente su diseño, en lugar de un usuario que solo necesita cambiar el tamaño de su / ella texareay termina haciendo que algo no funcione

— Redwolf Programas

25

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

— Imtiaz Ali Baigal
fuente

21

Si necesita un apoyo profundo, puede usar una técnica de la vieja escuela:

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;
}

— yevgeniy
fuente

77

Úselo también resize:nonecon esta solución para evitar que el mango aparezca en la esquina inferior, lo que frustrantemente no funciona.

— MacroMan

13

Esto se puede hacer en HTML fácilmente:

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

Esto funciona para mi. El valor predeterminado es truepara el draggableatributo.

— Así, Wickramasinghe
fuente

Este es un atributo HTML 5, por lo que solo serán compatibles los navegadores más nuevos. Leí en alguna parte que IE lo admite desde el 9 en adelante.

— Antony D'Andrea

44

Esto funciona en la mayoría de los navegadores. en cada navegador más reciente.

— Así, Wickramasinghe el

no evitará que el área de texto

— cambie

@ AntonyD'Andrea Esto no funciona en el último Chrome: jsfiddle.net/ps2v8df9

— Advait Junnarkar

6

Para deshabilitar la propiedad de cambio de tamaño, use la siguiente propiedad CSS:

resize: none;

Puede aplicar esto como una propiedad de estilo en línea de la siguiente manera:
```
<textarea style="resize: none;"></textarea>
```
o entre <style>...</style>etiquetas de elementos de esta manera:
```
textarea {
    resize: none;
}
```

— Webeng
fuente

6

Simplemente usa: resize: none;en tu CSS.

La propiedad de cambio de tamaño especifica si el usuario puede cambiar el tamaño de un elemento o no.

Nota: La propiedad de cambio de tamaño se aplica a elementos cuyo valor de desbordamiento calculado no es "visible".

Tampoco se admite el cambio de tamaño en Internet Explorer en este momento.

Aquí hay diferentes propiedades para cambiar el tamaño:

Sin cambio de tamaño:

textarea {
  resize: none;
}

Cambiar el tamaño en ambos sentidos (vertical y horizontalmente):

textarea {
  resize: both;
}

Cambiar el tamaño verticalmente:

textarea {
  resize: vertical;
}

Cambiar el tamaño horizontalmente:

textarea {
  resize: horizontal;
}

Además, si tiene widthy heighten su CSS o HTML, evitará que su área de texto cambie de tamaño, con un soporte de navegadores más amplio.

— Alireza
fuente

3

CSS 3 puede resolver este problema. Desafortunadamente, actualmente solo es compatible con el 60% de los navegadores usados .

Para Internet Explorer e iOS, no puede desactivar el cambio de tamaño, pero puede limitar la textareadimensión configurando su widthy height.

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

Ver demo

— Oriol
fuente

3

Simplemente puede deshabilitar la propiedad textarea de esta manera:

textarea {
    resize: none;
}

Para deshabilitar el cambio de tamaño vertical u horizontal , use

resize: vertical;

o

resize: horizontal;

— Peter Mortensen
fuente

2

He creado una pequeña demostración para mostrar cómo funcionan las propiedades de cambio de tamaño. Espero que te ayude a ti y a los demás también.

.resizeable {
  resize: both;
}

.noResizeable {
  resize: none;
}

.resizeable_V {
  resize: vertical;
}

.resizeable_H {
  resize: horizontal;
}

<textarea class="resizeable" rows="5" cols="20" name="resizeable" title="This is Resizable.">
This is Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

<textarea class="noResizeable" rows="5" title="This will not Resizable. " cols="20" name="resizeable">
This will not Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

<textarea class="resizeable_V" title="This is Vertically Resizable." rows="5" cols="20" name="resizeable">
This is Vertically Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

<textarea class="resizeable_H" title="This is Horizontally Resizable." rows="5" cols="20" name="resizeable">
This is Horizontally Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

Expandir fragmento

— Ambuj Khanna
fuente

1

Con @style, puede darle un tamaño personalizado y desactivar la función de cambio de tamaño (resize: none;).

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

— Carlos de Jesus Baez
fuente

1

Hola, gracias por tu respuesta, la próxima vez formatea el código.

— Baptiste Mille-Mathias

Esta es la respuesta basada en asp.net MVC. Muy agradable.

— yogihosting

0

Puedes probar con jQuery también

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

— Santosh Khalse
fuente

3

Deberías usar más jquery . No lo estás usando lo suficiente. :)

— Filip Savic

1

Es un meme , por ejemplo, "Deberías dejarlo totalmente y probar jQuery". .

— Peter Mortensen

0

Para deshabilitar el cambio de tamaño para todos los textareas:

textarea {
    resize: none;
}

Para deshabilitar el cambio de tamaño para un específico textarea, agregue un atributo name, o an idy configúrelo en algo. En este caso, se llamanoresize

HTML

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

CSS

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

#noresize {
    resize: none;
}

— Abk
fuente

-2

Agregar lo !importanthace funcionar:

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

outline es solo para evitar el contorno azul en ciertos navegadores.

— Kaelds
fuente

66

No abuses del !importantatributo. No tiene sentido corregir el ancho y la altura si el atributo CSS resize: nonepuede eliminar la función de cambio de tamaño

— Raptor

1

¿No es !importantmalo?

— Peter Mortensen

En Chrome actual, esto detiene el cambio de tamaño horizontal, pero aún puedo cambiar el tamaño del área de texto verticalmente.

— Avanza Junnarkar