Ngăn chặn hình ảnh bị kéo/thả hoặc chọn (highlight) trong HTML không dùng JS

Để ngăn hình ảnh bị kéo thả (drag) hoặc bị chọn (highlight) khi double-click, chỉ cần dùng CSS thuần túy:

CSS hoàn chỉnh (Cross-browser)

img {
  /* Ngăn kéo thả */
  -webkit-user-drag: none;     /* Chrome, Safari, Edge */
  user-drag: none;             /* Chuẩn (ít hỗ trợ) */
  
  /* Ngăn chọn/bôi đen text/hình */
  -webkit-user-select: none;   /* Chrome, Safari, Edge */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* IE 10+ */
  user-select: none;           /* Chuẩn hiện đại */
  
  /* Tùy chọn: Ngăn context menu chuột phải */
  -webkit-touch-callout: none; /* iOS Safari */
}

Giải thích các thuộc tính

Thuộc tính	Chức năng	Hỗ trợ
`user-drag` / `-webkit-user-drag`	Ngăn kéo thả phần tử	WebKit/Blink
`user-select`	Ngăn chọn/bôi đen (highlight)	Tất cả trình duyệt hiện đại
`-webkit-touch-callout`	Ngăn menu callout khi long-press trên iOS	iOS Safari

Ví dụ hoàn chỉnh

<!DOCTYPE html>
<html>
  <head>
    <style>
      img {
        -webkit-user-drag: none;
        user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        -webkit-touch-callout: none;
      }
    </style>
  </head>
  <body>
    <img src="https://example.com/image.png" alt="Hình ảnh không thể kéo/chọn" width="200">
  </body>
</html>

Lưu ý

CSS chỉ ngăn chặn hành vi UI mặc định. Kẻ tấn công vẫn có thể tải ảnh qua DevTools, "Save image as...", hoặc screenshot.
Áp dụng cho toàn trang: * { user-select: none; } nhưng sẽ làm form/input không dùng được → nên chỉ áp dụng cho img hoặc class cụ thể.
Thuộc tính HTML draggable="false" cũng giúp ngăn kéo trên một số trình duyệt: <img draggable="false">.