Pregunta ¿Cómo deshabilitar la propiedad de tamaño variable de textarea?


Quiero deshabilitar la propiedad redimensionable de un textarea.

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


2154
2018-03-08 16:15


origen


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.

Para deshabilitar un específico 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;
}

los Página W3C enumera los valores posibles para las restricciones de cambio de tamaño: ninguno, ambos, horizontal, vertical y heredar:

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

Revisa un decente página de compatibilidad para ver qué navegadores actualmente admiten esta función. Como Jon Hulka ha comentado, 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 no sea visible, que es la predeterminada para la mayoría de los elementos. Por lo general, para usar esto, tendrás que configurar algo como overflow: scroll;

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


2861
2018-03-08 16:17



En CSS ...

textarea {
    resize: none;
}

174
2018-03-08 16:17



Encontré 2 cosas

primero

textarea{resize:none}

esto es un css3 que aún no se ha lanzado compatible con Firefox4 + Chrome y safari 

otra característica de formato es desbordamiento: automático deshacerse de la barra de desplazamiento derecha teniendo en cuenta 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

  • IE8

enter image description here

  • FF 17.0.1

enter image description here

  • cromo

enter image description here


91
2017-12-27 20:58



CSS3 tiene una nueva propiedad para los elementos de la interfaz de usuario que te permitirá hacer esto. La propiedad es la cambiar el tamaño de la propiedad. Por lo tanto, debería agregar lo siguiente a su hoja de estilo para deshabilitar el cambio de tamaño de todos los elementos textarea:

textarea { resize: none; }

Esta es una propiedad de CSS3; usar una tabla de compatibilidad para ver la compatibilidad del navegador.

Personalmente, me resulta muy molesto tener el cambio de tamaño deshabilitado en elementos de texto. Esta es una de esas situaciones en las que el diseñador está tratando de "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.


57
2018-03-08 16:35



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

19
2017-11-06 09:19



Si necesita apoyo profundo puede usar la 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;
}

18
2018-02-12 12:14



Esto se puede hacer en html fácil

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

Esto funciona para mí El valor predeterminado es true para draggable atributo.


9
2017-07-21 05:18



Simplemente usa: resize: none; en tu CSS

los redimensionar propiedad especifica si un elemento es redimensionable   por el usuario.

Nota: La propiedad de cambio de tamaño se aplica a los elementos cuyo desbordamiento calculado   el valor es algo más que "visible".

también redimensionar no soportado en IE en este momento.

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

Sin cambio de tamaño:

textarea { 
  resize: none; 
}

Cambiar el tamaño de ambas formas (vertical y horizontal):

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 su área de texto se redimensione, con una compatibilidad más amplia con los navegadores.


4
2018-06-01 13:11



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 como esta:

    <textarea style="resize: none;"></textarea>
    
  • o en el medio <style>...</style> etiquetas de elementos como así:

    textarea {
        resize: none;
    }
    

4
2018-06-12 10:43



CSS3 puede resolver este problema. Lamentablemente solo es compatible con 60% de los navegadores usados hoy en día.

Para IE 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 */

Ver demostración


2
2017-10-30 23:26



Agregar! Importante hace que funcione:

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

esquema es solo para evitar el esquema azul en cierto navegador


0
2018-02-03 19:07