CSS User Interface #
In this chapter you will learn about the following CSS user interface properties:
resize
outline-offset
rowser Support #
The numbers in the table specify the first browser version that fully supports the property.
Property | Chrome | Internet explorer | Mozila Firefox | Safari | Opera |
---|---|---|---|---|---|
resize | 4.0 | 79.0 | 5.0 | 4.0 | 15.0 |
outline-offset | 4.0 | 15.0 | 5.0 | 4.0 | 9.5 |
#
CSS Resizing #
The resize
property specifies if (and how) an element should be resizable by the user.
Let the user resize only the width of this div element.
to resize: Click and drag the bottom right corner of this div element.
The following example lets the user resize only the width of a element:
Example #
div {
resize: horizontal;
overflow: auto;
}
The following example lets the user resize only the height of a <div> element:
Example #
div {
resize: vertical;
overflow: auto;
}
The following example lets the user resize both the height and width of a <div> element:
Example #
div {
resize: both;
overflow: auto;
}
In many browsers, <textarea> is resizable by default. Here, we have used the resize property to disable the resizability:
Example #
textarea {
resize: none;
}
CSS Outline Offset #
The outline-offset
property adds space between an outline and the edge or border of an element.
Note: Outline differs from borders! Unlike border, the outline is drawn outside the element’s border, and may overlap other content. Also, the outline is NOT a part of the element’s dimensions; the element’s total width and height is not affected by the width of the outline.
The following example uses the outline-offset
property to add space 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;
}
CSS User Interface Properties #
The following table lists all the user interface properties:
Property | Description |
---|---|
outline-offset | Adds space between an outline and the edge or border of an element |
resize | Specifies whether or not an element is resizable by the user |