User Select

📌 مفهوم

ویژگی user-select مشخص می‌کند که کاربر آیا می‌تواند متن داخل یک عنصر را انتخاب کند یا خیر.
این ویژگی روی متن، دکمه‌ها، لینک‌ها و سایر عناصر متنی اعمال می‌شود.

📑 مقادیر CSS

مقدارتوضیح
autoمرورگر تصمیم می‌گیرد که متن قابل انتخاب باشد یا خیر (پیش‌فرض)
textمتن قابل انتخاب است
noneمتن غیرقابل انتخاب است
allبا یک کلیک یا انتخاب، کل متن عنصر انتخاب می‌شود
containفقط متن داخل عنصر قابل انتخاب است و از انتخاب متن عناصر فرزند جلوگیری می‌کند

مثال CSS:

p {
  user-select: none; /* متن قابل انتخاب نیست */
}

🏷 Tailwind CSS

Tailwind برای user-select کلاس‌های آماده دارد:

کلاستوضیح
select-noneغیرقابل انتخاب
select-textقابل انتخاب (پیش‌فرض)
select-allانتخاب کل متن
select-autoرفتار پیش‌فرض مرورگر

مثال Tailwind:

<p class="select-none">
  این متن قابل انتخاب نیست.
</p>

<p class="select-text">
  این متن قابل انتخاب است.
</p>

<p class="select-all">
  با یک بار کلیک، کل متن انتخاب می‌شود.
</p>

💡 کاربرد: جلوگیری از کپی متن در عناصر خاص، یا کنترل تجربه کاربری در فرم‌ها و رابط‌ها.