This chapter covers the following CSS properties related to user interface:
The numbers in the table indicate the initial browser version that offers complete support for the property.
The resize property determines whether and how an element can be resized by the user.
In the following example, users are allowed to resize only the width of a <div> element.
Example
|
div { |
In the following example, users are enabled to resize solely the height of a <div> element.
Example
| div { resize: vertical; overflow: auto; } |
In the following example, users can resize both the height and width of a <div> element.
Example
| div { resize: both; overflow: auto; } |
In numerous browsers, the <textarea> element is inherently resizable. Here, we’ve utilized the resize property to deactivate this capability.
Example
| textarea { resize: none; } |
The outline-offset property introduces a gap between an outline and the edge or border of an element.
| Note: Outlines differ from borders! Unlike borders, outlines are drawn outside the element’s border and may overlap other content. Additionally, outlines do not contribute to the element’s dimensions; thus, the total width and height of the element remain unaffected by the width of the outline. |
In the following example, the outline-offset property is employed to create distance between the border and the outline.
Example
| div.ex1 { margin: 20px; border: 1px solid black; outline: 4px solid red; outline-offset: 15px; } div.ex2 { margin: 10px; border: 1px solid black; outline: 5px dashed blue; outline-offset: 5px; } |
