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

pozycja

dowolna

dziedziczenie

nie

wartość initial

auto

wyjątki initial

brak

animowanie

nie (animacja nieciągła)

Interpretacja właściwości user-select

Firefox

tak, lecz z przedrostkiem -moz-

Google Chrome

tak

Safari

tak, lecz z przedrostkiem -webkit-

Opera

tak

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

  user-select:auto;
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:#CBFFFF;
      }
    </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

  user-select:text;
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:#CBFFFF;
      }
    </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

  user-select:none;
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:#CBFFFF;
      }
    </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

  user-select:all;
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:#CBFFFF;
      }
    </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>