Interesting -webkit CSS properties

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

And so, there are some very interesting properties that are inherent in the 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 the value to none will not pop up a window with information.
')

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

This property is useful in cases when any JavaScript / AJAX is hung on the link.

-webkit-user-drag

The property indicates that during block dragging, it is the block that should move, 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 the radio button:

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

Or like textarea:

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

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

-webkit-text-security

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

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

-webkit-user-select

Specifies what the user can choose from within the element

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

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

UPD . Refinement on the property -webkit-touch-callout .