CSS User Select Generator

/* User Select CSS Examples */

/* ============================================
   Basic User Select Values
   ============================================ */

/* Disable text selection */
.no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Default browser selection behavior */
.auto-select {
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
}

/* Allow text selection explicitly */
.text-select {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* Select all content on click */
.select-all {
  -webkit-user-select: all;
  -moz-user-select: all;
  -ms-user-select: all;
  user-select: all;
}

/* Contain selection within element */
.select-contain {
  -webkit-user-select: contain;
  -moz-user-select: contain;
  -ms-user-select: contain;
  user-select: contain;
}

/* ============================================
   UI Components - No Selection
   ============================================ */

/* Buttons and interactive elements */
button,
.btn,
[role="button"],
input[type="submit"],
input[type="button"],
input[type="reset"] {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
}

/* Navigation elements */
nav,
.nav,
.navbar,
.menu,
.sidebar {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Tabs and pills */
.tabs,
.tab,
.pill,
.chip,
.badge {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Icons and decorative elements */
.icon,
.svg-icon,
[class*="icon-"],
.emoji {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Form labels (prevent accidental selection) */
label {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* ============================================
   Code Blocks - Select All
   ============================================ */

/* Code blocks for easy copying */
pre,
code,
.code-block,
.code-snippet {
  -webkit-user-select: all;
  -moz-user-select: all;
  -ms-user-select: all;
  user-select: all;
  cursor: text;
}

/* Inline code - text selection */
code:not(pre code) {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* Terminal/Console output */
.terminal,
.console,
.output {
  -webkit-user-select: all;
  -moz-user-select: all;
  -ms-user-select: all;
  user-select: all;
}

/* ============================================
   Form Inputs - Allow Selection
   ============================================ */

/* Text inputs should allow selection */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
textarea {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* Readonly inputs - select all */
input[readonly],
textarea[readonly] {
  -webkit-user-select: all;
  -moz-user-select: all;
  -ms-user-select: all;
  user-select: all;
}

/* ============================================
   Drag and Drop
   ============================================ */

/* Draggable elements */
.draggable,
[draggable="true"],
.drag-handle {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: grab;
}

.draggable.dragging,
[draggable="true"].dragging {
  cursor: grabbing;
}

/* Sortable list items */
.sortable-item {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* ============================================
   Canvas and Drawing
   ============================================ */

canvas,
.canvas-container,
.drawing-area {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* ============================================
   Card and Container Patterns
   ============================================ */

/* Clickable cards - no selection on entire card */
.card.clickable,
.card-link,
a.card {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* But allow text selection inside card content */
.card .card-body,
.card .card-content,
.card .card-text {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* ============================================
   Modal and Overlay
   ============================================ */

/* Modal overlay - no selection */
.modal-overlay,
.modal-backdrop,
.overlay {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Modal content - allow selection */
.modal-body,
.modal-content {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* ============================================
   Special Components
   ============================================ */

/* Sliders and range controls */
input[type="range"],
.slider,
.range-slider {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Toggle switches */
.toggle,
.switch,
.checkbox-custom {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Progress bars */
.progress,
.progress-bar {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Rating stars */
.rating,
.stars {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Tooltips */
.tooltip,
[data-tooltip] {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* ============================================
   Copyable Elements
   ============================================ */

/* API keys, tokens, IDs - select all */
.api-key,
.token,
.copy-text,
.copyable {
  -webkit-user-select: all;
  -moz-user-select: all;
  -ms-user-select: all;
  user-select: all;
  cursor: pointer;
  font-family: monospace;
}

/* URLs and paths */
.url,
.path,
.file-path {
  -webkit-user-select: all;
  -moz-user-select: all;
  -ms-user-select: all;
  user-select: all;
}

/* ============================================
   Tables
   ============================================ */

/* Table headers - no selection */
th,
.table-header {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Table cells - allow selection */
td,
.table-cell {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* ============================================
   Responsive Considerations
   ============================================ */

/* Touch devices - more lenient selection */
@media (hover: none) and (pointer: coarse) {
  /* Allow text selection on touch devices */
  .touch-select {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
  }
}

/* Desktop - can be stricter */
@media (hover: hover) and (pointer: fine) {
  .desktop-no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
}

/* ============================================
   Utility Classes
   ============================================ */

/* Quick utility classes */
.unselectable {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

.selectable {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

.select-all-text {
  -webkit-user-select: all !important;
  -moz-user-select: all !important;
  -ms-user-select: all !important;
  user-select: all !important;
}

/* ============================================
   Print Styles
   ============================================ */

@media print {
  /* Allow all selection for printing */
  * {
    -webkit-user-select: auto !important;
    -moz-user-select: auto !important;
    -ms-user-select: auto !important;
    user-select: auto !important;
  }
}