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

This article introduces the relevant knowledge of "practical case analysis of CSS skills". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Suppose you are creating a search form. The user enters the content and then clicks the search button to search.

Here is the HTML code for the parameters:

It is important to note that the search button can only be clicked after it has been typed in the input box. We can't allow users to search with empty strings, can we?

We can use the following code to achieve the above functions.

In my opinion, it is better to use the CSS: not (: placeholder-shown) pseudo-class without using JavaScript. The selector consists of two parts:: not () and: placeholder-shown.

So,: not (: placeholder-shown) means that when the input box has content, apply a style to it.

We can use it in conjunction with the CSS + operator to improve the search button.

Please take a look at the effect below. When the user enters something, the search button will be displayed, otherwise it will not be displayed. The only difference from JavaScript. There is no JavaScript.

We can also use the above: not (: placeholder-shown) in combination with the focus pseudo class. In this way, the behavior becomes that the style is applied only when you enter something in the input box:

This is a very clever technique and is useful in creating search forms, login forms, and so on. I hope you enjoy this article and find this CSS technique useful to you. Of course,: not (: placeholder-shown) pseudo-class is not suitable for all browsers. I personally recommend that you check browser compatibility before using it in your website.

This is the end of the content of "practical example Analysis of CSS skills". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.