CSS User Interface Properties

UI Properties

cursor changes the mouse cursor appearance.

resize allows users to resize elements.

outline draws outline outside border (doesn't affect layout).

caret-color changes text input cursor color.

user-select controls text selection behavior.

/* Cursor types */
.clickable {
  cursor: pointer;
}

.help {
  cursor: help;
}

.disabled {
  cursor: not-allowed;
}

/* Resizable element */
.resizable {
  resize: both;
  overflow: auto;
}

/* Outline (for accessibility) */
button:focus {
  outline: 2px solid #4CAF50;
  outline-offset: 2px;
}

/* Remove outline (bad for accessibility!) */
.no-outline:focus {
  outline: none; /* Avoid this */
}

/* Caret color */
input {
  caret-color: #4CAF50;
}

/* Prevent text selection */
.no-select {
  user-select: none;
}