resize в CSS


Содержание

resize

Свойство CSS resize позволяет дать возможность пользователям самостоятельно изменять размер элемента. Это бывает удобно в тех случаях, когда у элемента присутствует скроллинг, то есть не все содержимое видно на экране.

Тип свойства

Применяется: к элементам с overflow отличным от visible.

Значения

Значением свойства resize является одно из ключевых слов, разрешающих или запрещающих изменение размера элемента пользователем.

  • none — изменять размеры элемента нельзя.
  • both — пользователь может изменять размеры элемента по вертикали и горизонтали.
  • horizontal — изменение размеров разрешено только по горизонтали.
  • vertical — менять размеры можно только по вертикали.
  • inherit — наследует значение resize от родительского элемента.

Процентная запись: не существует.

Значение по умолчанию: none.

Синтаксис

Пример CSS: использование resize

Результат. Использование свойства CSS resize.

textarea resize CSS

Тег textarea.

placeholder устанавливает всплывающую подсказку, которая исчезнет при щелчке «>

Выделение содержимого внутри textarea.

Кнопка вне поля

Кнопка вне формы

textarea с шириной w > Для того, чтобы поле не выходило за границы блока, нужно прописать свойства

Как убрать скрол у textarea в ИЕ.

Удалить рамку во время фокуса в Хроме.


Показать/скрыть текст по щелчку

24 комментария:

Евгения Отличная статья, спасибо. Nomad Я буквально два дня назад столкнулся с терминами div >div dir=ltr,и был уверен что только ими можно создать бокс со скроллом будь то слева или или справа, оставалось добраться до resize — а он у вас.
Здравствуйте,Наталья!
Ваш блог я часто посещаю ввиду очень полезного содержания.Спасибо вам! NMitra Здравствуйте! Слова «очень полезного содержания» греют душу. Nomad На самом деле мне стоило сказать больше.
У окон с этой страницы необычные свойства — они редактируются,как будто они в редакторе,это нормально? NMitra Да, я просто не стала запрещать изменение (readonly). При обновлении страницы всё встаёт на свои места. Светлана Ковалева Кое-что из этого пригодилось. Спасибо, Наталья, за хороший материал! Светлана Ковалева У меня появился вопрос. Подскажите, пожалуйста, Наталья, наверняка вы знаете, как добавить ссылку или кнопку, при нажатии на которую происходило бы копирование в буфер обмена содержимого внутри textarea? NMitra Да, есть такая, но известный мне скрипт работает не во всех браузерах, поэтому я не стала его публиковать. Светлана Ковалева Понятно. Спасибо за ответ! Якушевская Юлия Сергеевна Добрый вечер. Спасибо за полезный и нужный материал. Немного знала и пользовалась, но ваш сайт — это просто находка. :) Анонимный А в 7-ом Эксплорере НЕ работает NMitra Да, не все новинки успевает подхватить этот браузер. В 10 версии будет лучше. Анонимный Показать/скрыть текст по щелчку в IE 7 — не пашет, видимо по причине разных !DOCTYPE NMitra Честно говоря, не скажу поддерживается ли там :focus Анонимный Супер Анонимный Здравствуйте!
Можно у Вас спросить.
Как сделать чтобы написанное в textarea. Также отображалось и в iframe.
Например.
У Вас
Очень хороший сайт
Много интересного и полезного.
Спасибо
ВАМ!
А то там всё в кучу получается.
NMitra Здравствуйте,
http://shpargalkablog.ru/2014/10/window-open-javascript.html#popup а именно contentWindow (это чтобы изменить страницу, которая в iframe)
есть ещё у iframe атрибут srcdoc, при наличии которого игнорируется src

NMitra Эм, если вас интересуют переносы строк, то элементу в iframe нужно задать стиль
white-space: pre-wrap;
или \n заменить на

.replace(/\n/gi, ‘
‘) Анонимный Спасибо Вам, как всегда гора интересного.
Но разве всё так сложно. Или может я не так объяснил.
Вот что мне надо.
Я написал в textarea
СПАСИБО
ВАМ.
И после нажатия кнопки с помощью ПХП у меня всё идёт в iframe. Тут же на странице.
Но проблема в том что в iframe. Это выглядит так.
СПАСИБО ВАМ.
То есть одно строка, вместо двух.
И ещё из textarea можно отослать как либо нажатием клавише Enter. Или только, как я искал только при помощи
NMitra Вам нужно \n заменить на

В php тоже есть функция регулярных выражений, как replace Анонимный С клавише Enter. Нашёл более менее приемлемое решение без
JavaScript. Просто Таbом выводим фокус из textarea и жмём Enter.
Но очень важно чтобы кнопка тогда в списке формы была именно под textarea. На экране всё равно где. Тогда фокус из textarea будет при первом нажатии Таb именно на кнопке. Но если вам надо при втором нажатии тогда кнопка 2 после textarea
Но про это чёто не получается.
11111111111111111
2222222222222222
А не
1111111111111222222222222
Анонимный О Вы уже написали пока я думал. Ясно понял. Теперь всё думаю получиться.
Спасибо Вам за ответы и за такой замечательный сайт!!
Анонимный Можно несколько уголков сделать «пятнистыми» для изменения размера. NMitra Только с помощью :before и :after самому добавлять небольшие иконки

Илон Маск рекомендует:  Необычный шаблон сайта HTML, CSS, JavaScripts, 5 страниц

Использование свойства CSS изменения размера

21 октября 2020 | Опубликовано в css | Нет комментариев »

Одно из неособо известных свойств CSS3, свойство изменения размера, действует именно так, как следует из его названия: позволяет пользователю изменить размер почти любого элемента HTML, к которому оно применяется. Это свойство не делает содержимое больше или меньше, масштаб содержимого не меняется, если содержимое не влазит в элемент, то может появиться прокрутка.

У свойства изменения размера может быть одно из четырех значений, не считая значения наследования:

none Размер элемента не может быть изменен. Это значение по умолчанию для большинства элементов в большей части таблиц стилей браузеров.
horizontal Элемент может быть изменен пользователем, но только по горизонтали.
vertical Элемент может быть изменен пользователем, но только по вертикали.
both Элемент можно изменять и по горизонтали, и по вертикали.

Это свойство не применяется к блочным элементам, у которых свойству переполнения задано значение видимое, а также к изображениям.

Первый пример использования свойства изменения размера обычно неудобен в использовании, но полезен при демонстрации возможностей свойства: к блоку с содержимым применяется свойство изменения размера со значением оба. В результате получаем следующее:

Второй пример полезней: браузеры, поддерживающие свойство изменения размера, применяют его к элементам поля ввода текста по умолчанию. Хотя это хорошая идея — пользователю нужно иметь возможность изменить размер поля ввода текста, чтобы иметь достаточно места для того, что он вписывает, — неограниченное изменение размера может испортить дизайн веб-страницы. В большинстве ситуаций лучше задать правило CSS, ограничивающее изменение размера поля ввода текста только одним направлением, следующим образом:

Вышеприведенная запись также присутствует в рекомендуемой нами таблице стилей для сброса для кода CSS.

На момент перевода этого урока поддержка свойства CSS3 изменения размера присутствует во всех последних и многих устаревших версиях браузеров Firefox, Chrome, Opera и Safari, и не поддерживается многими мобильными браузерами, а также браузерами Internet Explorer и Edge.

The CSS Resize Property

Contents

Making CSS resize images and more

By using the CSS resize property, you can specify whether an element can be resized by the user:

In addition to that, this property allows you to define the directions in which the element can be resized:


Note: you cannot use resize on inline elements or block elements that have the overflow property set to visible .

Syntax requirements for CSS resize

The syntax for the resize CSS property requires you to choose and define one out of four available values:

In the example below, you can see how to make textarea not resizable by using the default value of CSS resize :

CSS resize

The resize property determines how an element can be resized by the user, if at all.

You can specify whether the user can resize the element horizontally, vertically, both, or not at all.

The resize property is not to be confused with the overflow property, which allows you to specify what should happen when an element’s contents are too large to fit inside the box. In this case you can specify that the box should grow scrollbars, hide the content, or that the content should not be clipped (i.e. that it should appear outside the box). However, that is not the same as the resize property, which allows the user to resize the box.

The resize property does not apply to blocks where the overflow property is set to visible . Given that this is the default value for that property, you will need to make sure that overflow is set to something other than visible (such as scroll or auto ).

Syntax

Possible Values

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial Represents the value specified as the property’s initial value. inherit Represents the computed value of the property on the element’s parent. unset This value acts as either inherit or initial , depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

Basic Property Information

Example Code

Basic CSS

Working Example within an HTML Document

CSS Specifications

  • The resize property is defined in CSS Basic User Interface Module Level 3 (CSS3 UI) (W3C Candidate Recommendation, 7 July 2015).
Илон Маск рекомендует:  Публикации. Список научных трудов. Колесников Д.Г.

Browser Support


The following table provided by Caniuse.com shows the level of browser support for this feature.

Vendor Prefixes

For maximum browser compatibility many web developers add browser-specific properties by using extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -ms- for Internet Explorer, -moz- for Firefox, -o- for older versions of Opera etc. As with any CSS property, if a browser doesn’t support a proprietary extension, it will simply ignore it.

This practice is not recommended by the W3C, however in many cases, the only way you can test a property is to include the CSS extension that is compatible with your browser.

The major browser manufacturers generally strive to adhere to the W3C specifications, and when they support a non-prefixed property, they typically remove the prefixed version. Also, W3C advises vendors to remove their prefixes for properties that reach Candidate Recommendation status.

Many developers use Autoprefixer, which is a postprocessor for CSS. Autoprefixer automatically adds vendor prefixes to your CSS so that you don’t need to. It also removes old, unnecessary prefixes from your CSS.

You can also use Autoprefixer with preprocessors such as Less and Sass.

CSS3 Свойство resize

Пример

Указать, что размеры элемента div могут изменяться пользователем:

div
<
resize:both;
overflow:auto;
>

Попробуйте сами »

Поддержка Браузерами

Свойство resize поддерживается в Firefox 4+, Chrome и Safari.

Определение и Использование

Свойство resize указывает может или нет пользователь изменять размер элемента.

Замечание: Свойство resize применяется к элементам, чье вычисляемое значение overflow отлично от «visible».

Использование свойства CSS изменения размера

21 октября 2020 | Опубликовано в css | Нет комментариев »

Одно из неособо известных свойств CSS3, свойство изменения размера, действует именно так, как следует из его названия: позволяет пользователю изменить размер почти любого элемента HTML, к которому оно применяется. Это свойство не делает содержимое больше или меньше, масштаб содержимого не меняется, если содержимое не влазит в элемент, то может появиться прокрутка.

У свойства изменения размера может быть одно из четырех значений, не считая значения наследования:

none Размер элемента не может быть изменен. Это значение по умолчанию для большинства элементов в большей части таблиц стилей браузеров.
horizontal Элемент может быть изменен пользователем, но только по горизонтали.
vertical Элемент может быть изменен пользователем, но только по вертикали.
both Элемент можно изменять и по горизонтали, и по вертикали.


Это свойство не применяется к блочным элементам, у которых свойству переполнения задано значение видимое, а также к изображениям.

Первый пример использования свойства изменения размера обычно неудобен в использовании, но полезен при демонстрации возможностей свойства: к блоку с содержимым применяется свойство изменения размера со значением оба. В результате получаем следующее:

Второй пример полезней: браузеры, поддерживающие свойство изменения размера, применяют его к элементам поля ввода текста по умолчанию. Хотя это хорошая идея — пользователю нужно иметь возможность изменить размер поля ввода текста, чтобы иметь достаточно места для того, что он вписывает, — неограниченное изменение размера может испортить дизайн веб-страницы. В большинстве ситуаций лучше задать правило CSS, ограничивающее изменение размера поля ввода текста только одним направлением, следующим образом:

Вышеприведенная запись также присутствует в рекомендуемой нами таблице стилей для сброса для кода CSS.

На момент перевода этого урока поддержка свойства CSS3 изменения размера присутствует во всех последних и многих устаревших версиях браузеров Firefox, Chrome, Opera и Safari, и не поддерживается многими мобильными браузерами, а также браузерами Internet Explorer и Edge.

Resize

Class Properties
.resize-none resize: none;
.resize resize: both;
.resize-y resize: vertical;
.resize-x resize: horizontal;

Resize in all directions

Use .resize to make an element horizontally and vertically resizable.

Resize vertically

Use .resize-y to make an element vertically resizable.

Resize horizontally

Use .resize-x to make an element horizontally resizable.

Prevent resizing

Use .resize-none to prevent an element from being resizable.

Customizing

Responsive and pseudo-class variants

By default, only responsive variants are generated for resizing utilities.

You can control which variants are generated for the resizing utilities by modifying the resize property in the variants section of your tailwind.config.js file.

For example, this config will also generate hover and focus variants:

Disabling

If you don’t plan to use the resizing utilities in your project, you can disable them entirely by setting the resize property to false in the corePlugins section of your config file:


Как для поля textarea HTML запретить изменение размера?

Приветствую вас на сайте Impuls-Web!

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

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

Для поля textarea HTML запретить изменение размера можно несколькими способами.

Как в HTML полностью запретить изменение размера textarea?

Если вы хотите полностью заблокировать изменение размера текстового поля textarea, а так же убрать уголок-индикатор, то наиболее эффективным будет использование свойства resize со значением none.

Как видите, уголок-индикатор исчез, и для пользователя нет возможности растянуть поле.

Как для textarea HTML запретить изменение размера в одном направлении?

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

В таком случае было бы намного разумнее для textarea HTML запретить изменение размера, в зависимости от верстки, только в одном направлении. Например, в моем случае, при растягивании поля по ширине, поле уходит за пределы формы, и это существенно портит внешний вид. Но если растянуть поле в низ, то с версткой ничего страшного не произойдет, просто форма станет немного больше по высоте, и в тоже время, для пользователя будет намного удобнее вводить текст:

Чтобы добиться такого результата, нам нужно задать для свойства resize одно из этих значений:

  • vertical – разрешает изменение размера текстового поля по вертикали
  • horizontal— разрешает изменение размера по горизонтали

resize

Easily manage projects with monday.com

The resize property controls if and how an element can be resized by the user by clicking and dragging the bottom right corner of the element.

Super important to know: resize does nothing unless the overflow property is set to something other than visible , which is its initial value for most elements.

It’s also worth knowing that Firefox will let you resize an element smaller than its original size. Webkit browsers will not let you resize an element to make it smaller, only larger (in both dimensions).

Values


  • none : the element is not resizeable. This is the initial value for most elements. The textarea element is the most common exception—in many browsers its default resize value is both .
  • both : the user can resize the element’s height and/or width.
  • horizontal : the user can resize the element horizontally (increasing the width).
  • vertical : the user can resize the element vertically (increasing the height).
  • inherit : the element inherits the resize value of its parent.

When an element is resizeable, it has a little UI handle on a lower corner. The handle appears on the right on page elements when the page’s direction is set to ltr (left-to-right), and on the left on rtl (right-to-left) pages.

An element without the handle (front) and with the handle (back)

The resizeable element in this demo is a paragraph. Click the buttons to try out the different resize values.

More Information

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

Chrome Opera Firefox IE Edge Safari
4 15 4* No 76 4

Mobile / Tablet

iOS Safari Opera Mobile Opera Mini Android Android Chrome Android Firefox
No 46 No 76 78 68

Comments

Hey, dude. I’m very grateful for all tricks you’ve shared.

Does this can also be subjected to onresize event??

I know this is a bit late, but window is the only part of the DOM that fires the onresize event

You’re always my first resource for everything CSS, cheers for all the help over the years!

Just wanted to expand upon your point about the weirdness across Chrome compared with Firefox. I assumed that you’d be able to assign a min-width, a width and a max-width on the resizable element, with the loaded width being taken by the default width. Then the user should be able to change the width between the min and max widths. This seems to be the case in Firefox but not in Chrome.

Any ideas if this is likely to change to implement the Firefox behaviour in Chrome also?

Hi,
css resize:both for iframe is not working in IE and firefox but working in chrome very nicely…plz give me suggestions

Might be worth adding that max-width and max-height can be used to limit the amount the element can be resized. Stops it being too large and breaking out of its parent for example.

Late reply, but perhaps it still helps someone:

I found the webkit restriction on not being able to downsize an element quite frustrating, and found adding :active < width:0; height: 0; >helps.

  • add width , height for a sensible starting size.
  • add min-width , min-height for a sensible min size, so you don’t end up with a 0x0 box that is hard to enlarge again.
  • add max-width , max-height for a sensible max size, so you don’t end up dragging the corner outside your window.
Илон Маск рекомендует:  Что такое код postmessage
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL