Developer

Intros How it works API reference Turbo CSS Fundamentals Utilities Box sizing Display Float Clear Overflow Position Z index Width Min width Max width Height Min height Max height Margin Padding Border Border width Border color Border style Border radius Outline Outline width Outline color Outline style Outline offset Top Right Bottom Left Inset Flex direction Flex grow Flex shrink Flex basis Flex wrap Order Flex Flex box alignment Justify content Align content Align items Align self Table layout Border collapse Background attachment Background clip Background color Background position Background repeat Background size Background pattern Object fit Object position Box shadow Opacity Visibility Color Font family Font size Font smoothing Font style Font weight Letter spacing Line height List style type List style position Tab size Text align Text decoration Text transform Text overflow Vertical align Whitespace Word break Transform Scale Rotate Translate Skew Transform origin Transition Transition property Transition duration Transition timing function Transition delay Appearance Cursor Pointer events Resize User select Fill Stroke color Stroke width Selectors Download Turbo UI

Layout

Box sizing Display Float Clear Overflow Position Z index

Sizing

Width Min width Max width Height Min height Max height

Spacing

Margin Padding

Border

Border Border width Border color Border style Border radius

Outline

Outline Outline width Outline color Outline style Outline offset

Coordinates

Top Right Bottom Left Inset

Flexbox

Flex direction Flex grow Flex shrink Flex basis Flex wrap Order Flex Flex box alignment

Box alignment

Justify content Align content Align items Align self

Table

Table layout Border collapse

Background

Background attachment Background clip Background color Background position Background repeat Background size Background pattern

Object

Object fit Object position

Effects

Box shadow Opacity Visibility

Text

Color Font family Font size Font smoothing Font style Font weight Letter spacing Line height List style type List style position Tab size Text align Text decoration Text transform Text overflow Vertical align Whitespace Word break

Transform

Transform Scale Rotate Translate Skew Transform origin

Transition

Transition Transition property Transition duration Transition timing function Transition delay

Interactivity

Appearance Cursor Pointer events Resize User select

SVG

Fill Stroke color Stroke width

User select

Syntax

Class

Properties

select-none

user-select: none;

select-text

user-select: text;

select-all

user-select: all;

select-auto

user-select: auto;

Padding is inside the element so to demonstrate it we put it on the container in this example.

<div class="t1 bg-c-white shadow-4 p-16 select-text"> select text </div>

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.

Disallow selecting the text.

t1 select-none

.t1.select-none { user-select: none; }

Allow selecting the text.

t1 select-text

.t1.select-text { user-select: text; }

Select the entire text contents all at once.

t1 select-all

.t1.select-all { user-select: all; }

Let the user agent determine.

t1 select-auto

.t1.select-auto { user-select: auto; }