Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to use webkit in css3. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

In css3, "- webkit" means webkit as the private attribute of the kernel browser; for different browsers, it is stipulated that different kernel names can parse the new attributes of css3, and the attributes prefixed with "- webkit-" can be used normally in browsers with webkit as the kernel.

The operating environment of this tutorial: windows10 system, CSS3&&HTML5 version, Dell G3 computer.

What does "webkit" mean in css3

The attribute prefixed with "- webkit-" can be used normally in browsers with webkit as the kernel

-webkit is often used to represent private attributes of chrome and safari

For different browsers, specify their kernel names so that they can parse these new attributes

Some new properties have been added to CSS3, such as box-reduis, box-orient, text-overflow, and so on, which did not exist or were not supported in previous versions, so the kernel name is specified for different browsers so that they can parse these new attributes.

This seems like a reasonable explanation that-moz- is for firefox and-webkit- is for safari and chrome.

-moz represents the private properties of the firefox browser

-ms represents the private properties of the IE browser

-webkit represents the private attributes of chrome and safari

-o represents the private attribute of Opera.

Extended data:

Common private attributes take chrome browsers as an example

:: if the previous blank code is global, if there is a css selector for an element to change the content of the element

1. Input box

::-webkit-input-placeholder {} / / prevent input from showing a yellow background input:-webkit-autofill {background-color: # fff! important;-webkit-box-shadow: inset 000000 1000px white! important;}

Clear the arrow on the side of input [type= "number"]

Input::-webkit-inner-spin-button {- webkit-appearance: none;}

2. Disable select text

* {- webkit-user-select: none;-moz-user-select: none;-ms-user-select: none; user-select: none;} this is the end of the article on "how to use webkit in css3". I hope the above content can be helpful to you so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.