Mouse cursor: the ‘cursor’ property

cursor

This property defines the cursor to display while the mouse is hovering over the element. The value is submitted directly through the system interface if the element’s context is set to enable cursors.

Caret color

caret-color

This property sets the color of the text input cursor, the marker which tells where the next character will be inserted. Can be used on text fields such as in <input> and <textarea> elements. A value of auto means that the caret color will use the element’s color property.

Box sizing

box-sizing

Determines how widths and heights are calculated.

content-box

This is the normal behavior. The width and height properties set the size of the content box.

border-box

The width and height properties set the size of the border box. This includes the content, padding and border, but not the margins. The sizes of the content box is calculated by subtracting the padding and border size, and is then floored at zero.

Setting the value to border-box can be valuable for laying out elements to fit on a line, especially when combining percentages and lengths for widths or heights, paddings, and borders. For example, if you have two elements of width: 50% and some positive length for the border, they will not normally fit on a line. However, by applying box-sizing: border-box to the elements they will be able to fit next to each other.

This property takes no effect for auto values of width or height.

Pointer events: the ‘pointer-events’ property

pointer-events

Set the element property to disregard mouse input events on this and descending elements.

auto

The element behaves as it would if the pointer-events property were not specified.

none

The element is never the target of pointer events.

Drag & drop: the ‘drag’ property

The drag property is a new property, not shared by CSS. It controls the generation of events as the mouse cursor begins a drag over an element (ie, clicks the left mouse button and moves the mouse), drags over elements (moves the mouse with the button depressed) and finishes a drag, or ‘drops’, an element over another.

drag

Values have the following meanings:

none

If the mouse begins a drag over this element, the element is not dragged and does not generate any drag messages. However, it does not prevent an ancestor element from being dragged.

drag

If the mouse begins a drag over this element, the element will begin spawning drag messages. However, no messages will be directed to other elements relating to the drag or the eventual drop.

drag-drop

If the mouse begins a drag over this element, the element will begin spawning drag messages. Messages will also be directed to over elements if the dragged element is dragged over them.

block

If the mouse begins a drag over this element, the element is not dragged and neither is any ancestor element.

clone

Like drag-drop, but a clone of the element is attached to the mouse cursor during dragging. The clone has the pseudo-class :drag set on it to allow it to be differentiated from the original element.

Tab index: the ‘tab-index’ property

The ‘tab-index’ property is introduced for RCSS. It controls the generation of a tab order, which is an ordered list of elements within a document that gain input focus in turn as the ‘tab’ key is pressed.

tab-index

Values have the following meanings:

none

The element is not part of the tabbing order.

auto

The element inserts itself into the tabbing order in a location relative to its order in the element hierarchy.

Focus: the ‘focus’ property

focus

The ‘focus’ property is introduced for RCSS. It controls whether or not an element can receive focus. Typically set to none for disabled input elements,

Values have the following meanings:

none

The element can not receive focus. This will also prevent click events (when originating from user input) to reach the element.

auto

The element can receive focus.