Вопрос: Как отключить изменяемое свойство textarea?


Я хочу отключить изменчивое свойство textarea,

В настоящее время я могу изменить размер textareaнажав на нижний правый угол textareaи перетаскивание мыши. Как я могу отключить это?


2124


источник


Ответы:


Следующее правило CSS отключает поведение изменения размера для textareaэлементы:

textarea {
  resize: none;
}

Чтобы отключить его для некоторых (но не всех) textareaс, существует пара вариантов ,

Чтобы отключить textareaс nameатрибут, установленный для foo(Т.е. <textarea name="foo"></textarea>):

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

Или, используя idатрибут (т. е. <textarea id="foo"></textarea>):

#foo {
  resize: none;
}

Страница W3C перечисляет возможные значения для ограничений размера: ни один, оба, горизонтальные, вертикальные и наследуемые:

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

Просмотрите приличный страница совместимости чтобы посмотреть, какие браузеры поддерживают эту функцию. Как прокомментировал Джон Хулка, размеры могут быть еще более сдержан в CSS с использованием max-width, max-height, min-width и min-height.

Супер важно знать:

Это свойство ничего не делает, если свойство переполнения не является видимым, что является по умолчанию для большинства элементов. Поэтому, как правило, для этого вам нужно установить что-то вроде переполнения: прокрутка;

Цитата: Chris Coyier, http://css-tricks.com/almanac/properties/r/resize/


2808



В CSS ...

textarea {
    resize: none;
}

171



Я нашел 2 вещи

первый

textarea{resize:none}

это css3 который еще не выпущен совместим с Firefox4 + хром и сафари

другой функцией формата является переполнение: авто избавиться от правой полосы прокрутки с учетом реж атрибут

код и разные браузеры

Основной html

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

Некоторые браузеры

  • IE8

enter image description here

  • FF 17.0.1

enter image description here

  • хром

enter image description here


90



CSS3 имеет новое свойство для элементов пользовательского интерфейса, которое позволит вам это сделать. Имущество является изменить размер свойства , Поэтому вы должны добавить в таблицу стилей следующее, чтобы отключить изменение размера всех элементов textarea:

textarea { resize: none; }

Это свойство CSS3; использовать таблица совместимости для просмотра совместимости с браузером.

Лично мне было бы очень неприятно изменять размер элементов textarea. Это одна из тех ситуаций, когда дизайнер пытается «сломать» клиент пользователя. Если ваш проект не может разместить более крупную текстовую область, вам может потребоваться пересмотреть, как работает ваш проект. Любой пользователь может добавить textarea { resize: both !important; }к их стилю пользователя, чтобы переопределить ваши предпочтения.


57



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

19



If you need deep support you can use old school technique

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



This can be do in html easy

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

This works for me. Default value is true for draggable attribute.


9



To disable the resize property, use the following CSS property:

resize: none;
  • You can either apply this as an inline style property like so:

    <textarea style="resize: none;"></textarea>
    
  • or in between <style>...</style> element tags like so:

    textarea {
        resize: none;
    }
    

4



You simply use: resize: none; in your CSS.

The resize property specifies whether or not an element is resizable by the user.

Note: The resize property applies to elements whose computed overflow value is something other than "visible".

Also resize not supported in IE at the moment.

Here are different properties for resize:

No Resize:

textarea { 
  resize: none; 
}

Resize both ways (vertically & horizontally):

textarea { 
  resize: both; 
}

Resize vertically:

textarea { 
  resize: vertical; 
}

Resize horizontally:

textarea { 
  resize: horizontal; 
}

Also if you have width and height in your CSS or HTML, it will prevent your textarea be resized, with a broader browsers support.


3



CSS3 can solve this problem. Unfortunately it's only supported on 60% of used browsers nowadays.

For IE and iOS you can't turn off resizing but you can limit the textarea dimension by setting its width and height.

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

See Demo


2



Adding !important makes it work:

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

outline is just to avoid the blue outline on certain browser


0