Właściwość CSS – resize

Kategoria wpisu Interfejs, Kurs CSS, Kursy, PHP, HTML, CSS Tagi: , , , , on przez .



Dzięki właściwość CSS resize użytkownik zyskuje możliwość zmiany rozmiaru danego pola (np. div lub textarea).

Właściwość resize jest ściśle powiązana z overflow. Cecha nie będzie działać jeśli overflow=”visible”. Dopuszczalne wartości to „scroll”, „auto”, albo „hidden”.

Ustawienia resize

resize przyjmuje kilka wartości

  • none – brak
  • both – można dowolnie rozszerzać, zmieniać wymiary (bok, dół)
  • horizontal – można rozszerzać w bok
  • vertical – można rozszerzać w dół
  • initial – ustawienia domyślne
  • inherit – dziedziczy ustawienia rodzica

Przykłady:

Podstawowe wymiary przykładowych prostokątów – CSS

none

Kod HTML


resize: both

Kod HTML

Kod CSS


resize: horizontal

Kod HTML

Kod CSS


vertical

Kod HTML

Kod CSS


resize: initial

Kod HTML

Kod CSS


resize: inherit

Kod HTML

Kod CSS

Interpretacja przez przeglądarki

WłaściwośćChromeIE / EdgeFirefoSafariOpera
resize4.0nie działa5.0
4.0 -moz-
4.015.0

źródło:
https://www.w3schools.com/cssref/css3_pr_resize.asp

przeciąganie, zmienianie rozmiarów pola tekstowego z pomocą CSS

Przeczytaj również

Obramowanie na stronie – CSS Obramowanie (tzw. ramka) stanowi istotny element strony internetowej nie tylko w przypadku tabel, może ono np. stanowić bardzo ciekawą dekoracją (np. ...
Dopasowywanie obrazka do rozmiaru obszaru CSS3 ... Dzięki właściwości object-fit jesteśmy w stanie określić w jaki sposób interesujący nas element HTML (np. obrazek) powinien wypełnić dany obszar na st...
Style CSS dla Internet Explorer (IE 6, IE 7, IE 8) Częstym problemem podczas tworzenia strony internetowej jest wyświetlanie w różny sposób elementów witryny pod przeglądarkami (inaczej w Internet Expl...
Kierunek pisania tekstu właściwość direction / uni... Własność direction służy do ustawiana kierunku pisania tekstu. Przydatna jest np. w przypadku kiedy chcemy napisać, stworzyć stronę w innym języku ta...