¿Cómo desactivo la propiedad de tamaño variable de un área de texto?
Quiero deshabilitar la propiedad de tamaño variable de un textarea.
Actualmente, puedo cambiar el tamaño de un textarea haciendo clic en la esquina inferior derecha de la textarea y arrastrando el mouse. ¿Cómo puedo desactivar esto?
preguntado el 08 de marzo de 11 a las 13:03
user549757
16 Respuestas
La siguiente regla CSS deshabilita el comportamiento de cambio de tamaño para textarea elementos:
textarea {
resize: none;
}
Para deshabilitarlo para algunos (pero no todos) textareas, hay un par de opciones.
Puedes usar class atributo en su etiqueta (<textarea class="textarea1">):
.textarea1 {
resize: none;
}
Para deshabilitar un textarea con el name atributo establecido en foo (Es decir, <textarea name="foo"></textarea>):
textarea[name=foo] {
resize: none;
}
O, usando un id atributo (es decir, <textarea id="foo"></textarea>):
#foo {
resize: none;
}
EL Página del W3C enumera los valores posibles para las restricciones de cambio de tamaño: ninguno, ambos, horizontal, vertical y heredado:
textarea {
resize: vertical; /* user can resize vertically, but width is fixed */
}
Revisa un decente página de compatibilidad para ver qué navegadores admiten actualmente esta función. Como ha comentado Jon Hulka, las dimensiones pueden ser más restringido en CSS usando 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 algo diferente a visible, que es el valor predeterminado para la mayoría de los elementos. Entonces, en general, para usar esto, tendrá que configurar algo como overflow: scroll;
Cita de Sara Cope, http://css-tricks.com/almanac/properties/r/resize/
contestado el 22 de mayo de 21 a las 06:05
¿Existe una solución para Firefox, Opera y / o IE? - Sime Vidas
@ Š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
según davidwalsh.name/textarea-cambiar tamaño - use resize: vertical o resize: horizontal para restringir el cambio de tamaño a una dimensión. O use cualquiera de max-width, max-height, min-width y min-height. - jon hulka
¿Soy el único al que le resulta extraño configurar esto usando css y no atributos? ¿Por qué no puedo establecer deshabilitado o marcado u otras propiedades usando CSS ... - musculoso
@Buksy Porque "deshabilitado" es un estado, no una propiedad visual. Por tanto, es lógico que no deba ser decidido por un estilo idioma. - Kroltán
En CSS ...
textarea {
resize: none;
}
respondido 08 mar '11, 16:03
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 de formato es overflow: auto para deshacerse de la barra de desplazamiento derecha, teniendo en cuenta la dir atributo.
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
- Firefox 17.0.1
- Chrome
Respondido el 20 de junio de 20 a las 10:06
CSS 3 tiene una nueva propiedad para los elementos de la interfaz de usuario que le permitirá hacer esto. La propiedad es la cambiar el tamaño de la propiedad. 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 de CSS 3; usar una tabla de compatibilidad para ver la compatibilidad del navegador.
Personalmente, me resultaría muy molesto tener el cambio de tamaño deshabilitado en los elementos del área de texto. Esta es una de esas situaciones en las que el diseñador intenta "romper" el 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.
Respondido el 26 de Septiembre de 19 a las 10:09
Pero ese seria el usuario rompiendo intencionalmente su diseño, en lugar de un usuario que solo necesita cambiar el tamaño de su texarea y termina haciendo que algo no funcione - Programas de Redwolf
<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>
respondido 06 nov., 13:09
Si necesita un apoyo profundo, puede utilizar 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;
}
Respondido el 26 de Septiembre de 19 a las 10:09
También use resize:none con esta solución para evitar que el mango aparezca en la esquina inferior que frustrantemente no funciona. - macrohombre
Esto se puede hacer en HTML fácilmente:
<textarea name="textinput" draggable="false"></textarea>
Esto funciona para mi. El valor predeterminado es true para draggable atributo.
Respondido el 26 de Septiembre de 19 a las 10:09
Este es un atributo HTML 5, por lo que solo lo admitirán los navegadores más nuevos. Leí en algún lugar que IE lo admite desde el 9 en adelante. - Antony D'Andrea
Esto funciona en la mayoría de los navegadores. en cada navegador más reciente. - Asíitha Wickramasinghe
no evitará que textarea cambie de tamaño - mishko vladimir
@ AntonyD'Andrea Esto no funciona en la última versión de Chrome: jsfiddle.net/ps2v8df9 - Advait Junnarkar
Simplemente usa: resize: none; en tu CSS.
EL cambiar el tamaño propiedad 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 los elementos cuyo valor de desbordamiento calculado es distinto de "visible".
También cambiar el tamaño no es compatible con 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;
}
También si tienes width y height en su CSS o HTML, evitará que se cambie el tamaño de su área de texto, con un soporte de navegadores más amplio.
Respondido el 26 de Septiembre de 19 a las 10:09
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 así:
<textarea style="resize: none;"></textarea>o en el medio
<style>...</style>etiquetas de elementos así:textarea { resize: none; }
contestado el 10 de mayo de 18 a las 14:05
Puedes simplemente deshabilitar el área de texto propiedad como esta:
textarea {
resize: none;
}
Deshabilitar vertical or horizontal cambiar el tamaño, utilizar
resize: vertical;
or
resize: horizontal;
Respondido el 26 de Septiembre de 19 a las 10:09
CSS 3 puede resolver este problema. Desafortunadamente, solo es compatible con 60% de navegadores usados hoy en día.
Para Internet Explorer e iOS, no puede desactivar el cambio de tamaño, pero puede limitar el textarea dimensión estableciendo su width y height.
/* One can also turn on/off specific axis. Defaults to both on. */
textarea { resize:vertical; } /* none|horizontal|vertical|both */
Respondido el 26 de Septiembre de 19 a las 10:09
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 otros 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>Respondido el 13 de junio de 19 a las 06:06
Con @style, puede darle un tamaño personalizado y deshabilitar la función de cambio de tamaño (resize: none;).
@Html.TextAreaFor(model => model.YourProperty, new { @style = "width: 90%; height: 180px; resize: none;" })
Respondido 30 ago 18, 20:08
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. - yogui
Para deshabilitar el cambio de tamaño para todos textareas:
textarea {
resize: none;
}
Para deshabilitar el cambio de tamaño para un textarea, agregue un atributo, name, O un id y ajústelo a algo. En este caso, se llama noresize
HTML
<textarea name='noresize' id='noresize'> </textarea>
CO
/* Using the attribute name */
textarea[name=noresize] {
resize: none;
}
/* Or using the id */
#noresize {
resize: none;
}
Respondido el 26 de Septiembre de 19 a las 10:09
También puedes probar con jQuery
$('textarea').css("resize", "none");
Respondido el 15 de diciembre de 16 a las 08:12
Debes usa más jquery. No lo estás usando lo suficiente. :) - filip savic
Es un meme - p.ej, "Deberías dejar eso por completo y probar jQuery".. - Pedro Mortensen
Adición !important lo hace funcionar:
width:325px !important; height:120px !important; outline:none !important;
outline es solo para evitar el contorno azul en ciertos navegadores.
Respondido el 26 de Septiembre de 19 a las 10:09
No abuses !important atributo. No tiene sentido arreglar el ancho y el alto si el atributo CSS resize: none puede eliminar la función de cambio de tamaño - Raptor
No es !important ¿maldad? - Pedro 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. - Advait Junnarkar
En algunos casos raros, esto podría ser útil. - EPurpl3
No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas html css or haz tu propia pregunta.
@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 de misión crítica actual). - random_user_name
A veces realmente quieres un área de texto que no se pueda cambiar de tamaño. Por ejemplo, en este caso, cuando está (condicionalmente) convirtiendo un área de texto en algo que se parece a una etiqueta. Parece realmente extraño tener una etiqueta con un capturador flotante aleatorio a un lado. - neminem
Por el amor de todo lo bueno, no hagas esto en un área de texto real o alienarás a tus usuarios avanzados. Romper la funcionalidad principal del navegador debe considerarse una opción nuclear. - superluminary