Ostatnio edytowany:

user-select

Autor: Virtual Patriot

Opis właściwości user-select

Za pomocą właściwości user-select możemy określić w jaki sposób może zostać zaznaczona oraz skopiowana przez użytkownika treść interesującego nas elementu HTML.

Dodatkowe techniczne informacje o właściwości user-select

przeznaczenie
  • element HTML każdego typu
dziedziczenie
  • nie
wartość initial
wyjątki initial
  • brak
animowanie
  • nie

Interpretacja właściwości user-select

Firefox

tak, lecz z przedrostkiem -moz-

Google Chrome

tak, lecz z przedrostkiem -webkit-

Safari

tak, lecz z przedrostkiem -webkit-

Opera

tak, lecz z przedrostkiem -webkit-

Internet Explorer

tak, lecz z przedrostkiem -ms- oraz od wersji 10

Nie interpretuje wartości all.

Edge

tak, lecz z przedrostkiem -ms-

Nie interpretuje wartości all.

Zobacz więcej informacji o interpretacji właściwości .

Opis wartości właściwości user-select

auto

Opis

Wartość auto jest domyślną wartością właściwości user-select.

Domyślnie treść elementu HTML może zostać zaznaczona oraz skopiowana przez użytkownika w taki sam sposób jak treść elementu rodzica.

Przykład

treść tego elementu "span" może zostać zaznaczona oraz skopiowana przez użytkownika w taki sam sposób jak treść elementu "div"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        padding:1em;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      <span>treść tego elementu "span" może zostać zaznaczona oraz skopiowana przez użytkownika w taki sam sposób jak treść elementu "div"</span>
    </div>

  </body>
</html>

text

Opis

Za pomocą wartości text właściwości user-select możemy sprawić, że treść interesującego nas elementu HTML może zostać zaznaczona oraz skopiowana przez użytkownika w dowolny sposób.

Przykład

treść tego elementu "div" może zostać zaznaczona oraz skopiowana przez użytkownika w dowolny sposób, ponieważ do tego elementu "div" została dodana właściwość "user-select" wraz z wartością "text"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        user-select:text;
        -moz-user-select:text;
        -webkit-user-select:text;
        -ms-user-select:text;
        padding:1em;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      treść tego elementu "div" może zostać zaznaczona oraz skopiowana przez użytkownika w dowolny sposób, ponieważ do tego elementu "div" została dodana właściwość "user-select" wraz z wartością "text"
    </div>

  </body>
</html>

none

Opis

Za pomocą wartości none właściwości user-select możemy sprawić, że treść interesującego nas elementu HTML nie może zostać zaznaczona oraz skopiowana przez użytkownika.

Przykład

treść tego elementu "div" nie może zostać zaznaczona oraz skopiowana przez użytkownika, ponieważ do tego elementu "div" została dodana właściwość "user-select" wraz z wartością "none"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        user-select:none;
        -moz-user-select:none;
        -webkit-user-select:none;
        -ms-user-select:none;
        padding:1em;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      treść tego elementu "div" nie może zostać zaznaczona oraz skopiowana przez użytkownika, ponieważ do tego elementu "div" została dodana właściwość "user-select" wraz z wartością "none"
    </div>

  </body>
</html>

all

Opis

Za pomocą wartości all właściwości user-select możemy sprawić, że treść interesującego nas elementu HTML może zostać zaznaczona oraz skopiowana przez użytkownika, lecz tylko w całości.

Przykład

treść tego elementu "div" może zostać zaznaczona oraz skopiowana przez użytkownika, lecz tylko w całości, ponieważ do tego elementu "div" została dodana właściwość "user-select" wraz z wartością "all"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        user-select:all;
        -moz-user-select:all;
        -webkit-user-select:all;
        -ms-user-select:all;
        padding:1em;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      treść tego elementu "div" może zostać zaznaczona oraz skopiowana przez użytkownika, lecz tylko w całości, ponieważ do tego elementu "div" została dodana właściwość "user-select" wraz z wartością "all"
    </div>

  </body>
</html>