Interesting -webkit CSS properties

If you know that WebKit can change the appearance of the SPAN tag to a button, or to the input field, or if you know by what property you can dictate the behavior of an element at the time of tap on it, then you are not here.

And so, there are some very interesting properties that are inherent in WebKit engines. For example, there is a property

-webkit-touch-callout

This property allows you to dictate the behavior of the browser at the time of tap and hold your finger on the link. By default, browsers pop up a window containing information about the link. By default, this property is set to default , but setting it to none will not pop up a window with information.

a.js-only {
  -webkit-touch-callout: none;
}

This property is useful to use when any JavaScript / AJAX is hung on the link.

-webkit-user-drag

The property indicates that during the dragging of a block, it is the block that should move, and not the contents inside it.

/* ничего не перетаскивает */
.content p.noDrag {
  -webkit-user-drag: none;
}
/* перетаскивается весь элемент а не контент внутри */
.sidebar div.elDrag {
  -webkit-user-drag: element;
}

-webkit-appearance

By setting this property to an element, you can determine how the SPAN element will look. For example, like a radio button:

span.lookLikeRadio {
  -webkit-appearance: radio;
}

Or as textarea:

span.lookLikeTextarea {
  -webkit-appearance: textarea;
}

There are about 50 such values. The whole list can be found here .

-webkit-text-security

It turns out that you can change the mask when entering the password. For example, instead of circles, you can display squares.

input[type="password"] {
  -webkit-text-security: square;
}

-webkit-user-select

Determines what the user can select inside the element.

div {
  -webkit-user-select: none;
}

That's all. It was a free translation of this article.

UPD . Refine by property -webkit-touch-callout .