What is :placeholder-shown in CSS? how to work? What is the use?-CSS Tutorial-php.cn

Table of Contents

:placeholder-showdMust have placeholder

##:placeholder-shown vs ::placeholder Therefore, We can use

:placeholder-shown vs :empty although

Okay, so the only way we can check if the input is empty is to use

So, we can target input elements that display placeholder text, which is cool . In other words, if placeholder text is displayed, it must mean that the element is empty. Using this knowledge, we can combine this pseudo-class with other selectors and do some really neat things! let's see.

:placeholder-shown For :not we can use

浮动标签

浏览器支持

Home

Web Front-end

CSS Tutorial

What is :placeholder-shown in CSS? how to work? What is the use?

青灯夜游

Jul 06, 2021 am 10:44 AM

css3

CSS :placeholder-shown pseudo-class is an object specifically used to determine whether an element displays a placeholder. It is mainly used to check whether the input content is empty. This article will take you through: placeholder-shown pseudo-class and introduce in detail how it works.

What is :placeholder-shown in CSS? how to work? What is the use?

Use this pseudo-class to style an input that is currently displaying placeholder text, in other words, the user is not typing anything in the text box

It would be nice to apply some dynamic styling depending on whether your input is empty or not

input:placeholder-shown {
  border-color: pink;
}

Copy after login

What is :placeholder-shown in CSS? how to work? What is the use?

How does it work?

:placeholder-show is a CSS pseudo-class that allows you to apply styles to <input> or ## that have placeholder text #<code>. </code><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><input placeholder="placeholder text" /> <textarea placeholder="placeholder text"></textarea></pre><div class="contentsignin">Copy after login</div></div></p><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/410/212/754/1625538386679176.png" class="lazy" title="162553837710681What is :placeholder-shown in CSS? how to work? What is the use?" alt="What is :placeholder-shown in CSS? how to work? What is the use?"/></p>Result: <p></p><ul>If the placeholder is shown, it is pink, indicating that the user did not enter anything<li></li> If no placeholder is shown, it is black, indicating that the user has typed<li></li></ul><h3 id="strong-placeholder-showd-code-Must-have-placeholder-code-strong"><strong>:placeholder-showd<code>Must have placeholder</code></strong> </h3>This selector will have no effect if the element has no placeholder text. <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><input />  <input placeholder="" /></pre><div class="contentsignin">Copy after login</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>input:placeholder-shown { border-color: pink; }</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div></p><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/410/212/754/1625538386679176.png" class="lazy" title="1625538386679176.png" alt="What is :placeholder-shown in CSS? how to work? What is the use?"/></p><h3 id="placeholder-shown-strong-vs-code-placeholder-code-code-code-strong-Therefore-We-can-use">##:placeholder-shown<strong> vs <code>::placeholder</code><code></code></strong> Therefore, We can use </h3>:placeholder-shown<p> to style the input element. <code><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>input:placeholder-shown { border: 1px solid pink; background: yellow; color: green; }</pre><div class="contentsignin">Copy after login</div></div></code></p><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/149/752/835/1625538395914353.gif" class="lazy" title="1625538395914353.gif" alt="What is :placeholder-shown in CSS? how to work? What is the use?"/>☝️Hmm... noticed something strange - we set the color to: green, but it didn't work. Well, that's because </p>:placeholder-shown<p> only targets the input itself. But for actual placeholder text, you must use the pseudo-element <code>::placeholder</code>. <code><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>input::placeholder { color: green; }</pre><div class="contentsignin">Copy after login</div></div></code></p><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/331/523/542/1625538400312242.gif" class="lazy" title="1625538400312242.gif" alt="What is :placeholder-shown in CSS? how to work? What is the use?"/>But! While I was working on this issue, I noticed that there are a few other properties that would affect the placeholder text if applied at the </p>:placeholder-shown<p> level. <code><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>input:placeholder-shown { font-style: italic; text-transform: uppercase; letter-spacing: 5px; }</pre><div class="contentsignin">Copy after login</div></div></code></p><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/792/300/942/1625538630753800.gif" class="lazy" title="162553841150936What is :placeholder-shown in CSS? how to work? What is the use?" alt="What is :placeholder-shown in CSS? how to work? What is the use?"/>Now, I don't really know why this happens, maybe it's because the properties are inherited by the placeholders. </p><p></p><h3 id="placeholder-shown-strong-vs-code-empty-code-code-code-strong-although">:placeholder-shown<strong> vs <code>:empty</code><code></code></strong> although </h3>:placeholder-shown<p> is specifically Used to determine whether an element displays placeholders. In fact, we can use this to check if the input is empty (assuming, of course, that all inputs have a placeholder). So maybe your next question is, can't we use CSS empty? Ok let's check <code><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><input value="not empty"> <input></pre><div class="contentsignin">Copy after login</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>input:empty { border: 1px solid pink; } input { border: 1px solid black; }</pre><div class="contentsignin">Copy after login</div></div></code></p><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/792/300/942/1625538630753800.gif" class="lazy" title="162553841732981What is :placeholder-shown in CSS? how to work? What is the use?" alt="What is :placeholder-shown in CSS? how to work? What is the use?"/> Expecting: </p><p></p> Pink if empty <ul><li> If not Empty is black</li><li></li>Hmm...from here on, you might think that </ul>:empty<p> seems to be working, since what we see is a pink border. But this doesn't actually work <code></code> The reason it's shown in pink is because pseudo-classes add specificity, similar to how class selectors (i.e. </p>.form-input<p>) are better than type selectors ( i.e. <code>input</code>) has higher specificity. High-specificity selectors will always override styles set by low-specificity. <code></code>This is the verdict! Don't use </p>:empty<p> to check if the input element is empty<code></code></p>How to check if the input is empty without placeholder? <h3 id="strong-strong-Okay-so-the-only-way-we-can-check-if-the-input-is-empty-is-to-use"><strong></strong>Okay, so the only way we can check if the input is empty is to use </h3>:placeholder-shown<p>. But what happens if our input elements don't have placeholders? Well, that's a smart way! Pass in an empty string <code>" "</code>. <code><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><input placeholder=" "></pre><div class="contentsignin">Copy after login</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>input:placeholder-shown { border-color: pink; }</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div></code></p><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/792/300/942/1625538630753800.gif" class="lazy" title="1625538630753800.gif" alt="What is :placeholder-shown in CSS? how to work? What is the use?"/></p>Combined with other selectors<h2 id="strong-strong-So-we-can-target-input-elements-that-display-placeholder-text-which-is-cool-In-other-words-if-placeholder-text-is-displayed-it-must-mean-that-the-element-is-empty-Using-this-knowledge-we-can-combine-this-pseudo-class-with-other-selectors-and-do-some-really-neat-things-let-s-see"><strong></strong>So, we can target input elements that display placeholder text, which is cool . In other words, if placeholder text is displayed, it must mean that the element is empty. Using this knowledge, we can combine this pseudo-class with other selectors and do some really neat things! let's see. </h2><p></p>Reverse<h3 id="placeholder-shown-strong-For-code-not-code-code-code-strong-we-can-use">:placeholder-shown<strong> For <code>:not</code><code></code></strong> we can use </h3>:not<p> Pseudo class to do the opposite. Here, we can perform target operations when the input is not empty. <code><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><input placeholder="placeholder" value="not empty" /></pre><div class="contentsignin">Copy after login</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>input:not(:placeholder) { border-color: green; }</pre><div class="contentsignin">Copy after login</div></div><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/738/627/999/1625538639610588.gif" class="lazy" title="1625538639610588.gif" alt="What is :placeholder-shown in CSS? how to work? What is the use?"/></p><p>结果：</p><ul><li>绿色，如果不为空，则表示用户已经输入了一些内容。</li><li>如果为空，则为黑色</li></ul><h3 id="strong-浮动标签-strong"><strong>浮动标签</strong></h3><p>使用占位符而不使用标签的问题之一就是无障碍，因为一旦你在打字的时候，占位符文字就没有了，这可能会导致用户的困惑。一个真正好的解决方案是浮动标签。最初，占位符文本显示时没有标签，而一旦用户开始输入，标签就会出现。这样一来，你仍然可以在不影响用户体验和可访问性的前提下，保持表单的简洁性。双赢</p><p>而这是可以用纯CSS实现的，我们只需要将 <code>placeholder-shown</code> 与 <code>:not</code> 和 <code>+</code> 结合起来就可以了。这是一个超级简化版的浮动标签。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><input name="name" placeholder="Type name..." /> <label for="name">NAME</label></pre><div class="contentsignin">Copy after login</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>label { display: none; position: absolute; top: 0; } input:not(:placeholder-shown) + label { display: block; }</pre><div class="contentsignin">Copy after login</div></div><p><img src="https://img.php.cn/upload/image/483/558/533/162553864890845What%20is%20:placeholder-shown%20in%20CSS?%20how%20to%20work?%20What%20is%20the%20use?" title="162553864890845What is :placeholder-shown in CSS? how to work? What is the use?" alt="What is :placeholder-shown in CSS? how to work? What is the use?"></p> <h2 id="strong-浏览器支持-strong"><strong>浏览器支持</strong></h2> <p>对 <code>:placeholder-shown</code> 的支持非常好！这包括Internet Explorer（是的，我和你一样惊讶）。但是，对于IE，你需要使用非标准名称 <code>:-ms-input-placeholder</code>。</p> <p><img src="https://img.php.cn/upload/image/717/511/416/162553847550403What%20is%20:placeholder-shown%20in%20CSS?%20how%20to%20work?%20What%20is%20the%20use?" title="162553847550403What is :placeholder-shown in CSS? how to work? What is the use?" alt="1What is :placeholder-shown in CSS? how to work? What is the use?"></p> <blockquote> <p>本文转载自：https://segmentfault.com/a/1190000039928413</p> <p>作者：杜尼卜</p> </blockquote> <p>更多编程相关知识，请访问：<a href="https://www.php.cn/course.html" target="_blank" textvalue="编程入门">编程入门</a>！！</p><p>The above is the detailed content of What is :placeholder-shown in CSS? how to work? What is the use?. For more information, please follow other related articles on the PHP Chinese website!</p> </div> </div> <div class="wzconShengming_sp"> <div class="bzsmdiv_sp">Statement of this Website</div> <div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div> </div> </div> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="2507867629"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="AI_ToolDetails_main4sR"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5902227090019525" data-ad-slot="3653428331" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>  <div class="phpgenera_Details_mainR3"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>Hot AI Tools</h2> </div> <div class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title"> <h3>Undresser.AI Undress</h3> </a> <p>AI-powered app for creating realistic nude photos</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title"> <h3>AI Clothes Remover</h3> </a> <p>Online AI tool for removing clothes from photos.</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title"> <h3>Undress AI Tool</h3> </a> <p>Undress images for free</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title"> <h3>Clothoff.io</h3> </a> <p>AI clothes remover</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title"> <h3>Video Face Swap</h3> </a> <p>Swap faces in any video effortlessly with our completely free AI face swap tool!</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ai">Show More</a> </div> </div> </div> <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script> <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>Hot Article</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/1796793874.html" title="How to fix KB5055523 fails to install in Windows 11?" class="phpgenera_Details_mainR4_bottom_title">How to fix KB5055523 fails to install in Windows 11?</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>4 weeks ago</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/1796793871.html" title="How to fix KB5055518 fails to install in Windows 10?" class="phpgenera_Details_mainR4_bottom_title">How to fix KB5055518 fails to install in Windows 10?</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>4 weeks ago</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/1796797907.html" title="Roblox: Grow A Garden - Complete Mutation Guide" class="phpgenera_Details_mainR4_bottom_title">Roblox: Grow A Garden - Complete Mutation Guide</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 weeks ago</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/1796797130.html" title="Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys" class="phpgenera_Details_mainR4_bottom_title">Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 weeks ago</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/1796796771.html" title="How to fix KB5055612 fails to install in Windows 10?" class="phpgenera_Details_mainR4_bottom_title">How to fix KB5055612 fails to install in Windows 10?</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 weeks ago</span> <span>By DDD</span> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/article.html">Show More</a> </div> </div> </div> <div class="phpgenera_Details_mainR3"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>Hot Tools</h2> </div> <div class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Notepad++7.3.1" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_title"> <h3>Notepad++7.3.1</h3> </a> <p>Easy-to-use and free code editor</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/toolset/development-tools/93" title="SublimeText3 Chinese version" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Chinese version" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/toolset/development-tools/93" title="SublimeText3 Chinese version" class="phpmain_tab2_mids_title"> <h3>SublimeText3 Chinese version</h3> </a> <p>Chinese version, very easy to use</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/toolset/development-tools/121" title="Zend Studio 13.0.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Zend Studio 13.0.1" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/toolset/development-tools/121" title="Zend Studio 13.0.1" class="phpmain_tab2_mids_title"> <h3>Zend Studio 13.0.1</h3> </a> <p>Powerful PHP integrated development environment</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Dreamweaver CS6" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title"> <h3>Dreamweaver CS6</h3> </a> <p>Visual web development tools</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/toolset/development-tools/500" title="SublimeText3 Mac version" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac version" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/toolset/development-tools/500" title="SublimeText3 Mac version" class="phpmain_tab2_mids_title"> <h3>SublimeText3 Mac version</h3> </a> <p>God-level code editing software (SublimeText3)</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ai">Show More</a> </div> </div> </div> <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>Hot Topics</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/java-tutorial" title="Java Tutorial" class="phpgenera_Details_mainR4_bottom_title">Java Tutorial</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1664</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>14</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/cakephp-tutor" title="CakePHP Tutorial" class="phpgenera_Details_mainR4_bottom_title">CakePHP Tutorial</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1423</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>52</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/laravel-tutori" title="Laravel Tutorial" class="phpgenera_Details_mainR4_bottom_title">Laravel Tutorial</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1317</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>25</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/php-tutorial" title="PHP Tutorial" class="phpgenera_Details_mainR4_bottom_title">PHP Tutorial</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1268</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>29</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/c-tutorial" title="C# Tutorial" class="phpgenera_Details_mainR4_bottom_title">C# Tutorial</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1242</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>24</span> </div> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/faq/zt">Show More</a> </div> </div> </div> </div> </div> <div class="Article_Details_main2"> <div class="phpgenera_Details_mainL4"> <div class="phpmain1_2_top"> <a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img src="/static/imghw/index2_title2.png" alt="" /></a> </div> <div class="phpgenera_Details_mainL4_info"> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/faq/493309.html" title="How to achieve wave effect with pure CSS3? (code example)" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/000/024/62ba93bc4121e658.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="How to achieve wave effect with pure CSS3? (code example)" /> </a> <a href="https://www.php.cn/faq/493309.html" title="How to achieve wave effect with pure CSS3? (code example)" class="phphistorical_Version2_mids_title">How to achieve wave effect with pure CSS3? (code example)</a> <span class="Articlelist_txts_time">Jun 28, 2022 pm 01:39 PM</span> <p class="Articlelist_txts_p">How to achieve wave effect with pure CSS3? This article will introduce to you how to use SVG and CSS animation to create wave effects. I hope it will be helpful to you!</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/faq/494015.html" title="Use CSS skillfully to realize various strange-shaped buttons (with code)" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/000/024/62d624a291cf0702.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Use CSS skillfully to realize various strange-shaped buttons (with code)" /> </a> <a href="https://www.php.cn/faq/494015.html" title="Use CSS skillfully to realize various strange-shaped buttons (with code)" class="phphistorical_Version2_mids_title">Use CSS skillfully to realize various strange-shaped buttons (with code)</a> <span class="Articlelist_txts_time">Jul 19, 2022 am 11:28 AM</span> <p class="Articlelist_txts_p">This article will show you how to use CSS to easily realize various weird-shaped buttons that appear frequently. I hope it will be helpful to you!</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/faq/492553.html" title="How to hide elements in css without taking up space" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202206/01/2022060118590194145.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="How to hide elements in css without taking up space" /> </a> <a href="https://www.php.cn/faq/492553.html" title="How to hide elements in css without taking up space" class="phphistorical_Version2_mids_title">How to hide elements in css without taking up space</a> <span class="Articlelist_txts_time">Jun 01, 2022 pm 07:15 PM</span> <p class="Articlelist_txts_p">Two methods: 1. Using the display attribute, just add the "display:none;" style to the element. 2. Use the position and top attributes to set the absolute positioning of the element to hide the element. Just add the "position:absolute;top:-9999px;" style to the element.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/faq/496068.html" title="How to implement lace borders in css3" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/000/024/6324593180439447.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="How to implement lace borders in css3" /> </a> <a href="https://www.php.cn/faq/496068.html" title="How to implement lace borders in css3" class="phphistorical_Version2_mids_title">How to implement lace borders in css3</a> <span class="Articlelist_txts_time">Sep 16, 2022 pm 07:11 PM</span> <p class="Articlelist_txts_p">In CSS, you can use the border-image attribute to achieve a lace border. The border-image attribute can use images to create borders, that is, add a background image to the border. You only need to specify the background image as a lace style; the syntax "border-image: url (image path) offsets the image border width inward. Whether outset is repeated;".</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/faq/491309.html" title="How to enlarge the image by clicking the mouse in css3" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202204/25/2022042516513036613.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="How to enlarge the image by clicking the mouse in css3" /> </a> <a href="https://www.php.cn/faq/491309.html" title="How to enlarge the image by clicking the mouse in css3" class="phphistorical_Version2_mids_title">How to enlarge the image by clicking the mouse in css3</a> <span class="Articlelist_txts_time">Apr 25, 2022 pm 04:52 PM</span> <p class="Articlelist_txts_p">Implementation method: 1. Use the ":active" selector to select the state of the mouse click on the picture; 2. Use the transform attribute and scale() function to achieve the picture magnification effect, the syntax "img:active {transform: scale(x-axis magnification, y Axis magnification);}".</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/faq/492762.html" title="It turns out that text carousel and image carousel can also be realized using pure CSS!" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/000/024/62a2cfd38f9f4694.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="It turns out that text carousel and image carousel can also be realized using pure CSS!" /> </a> <a href="https://www.php.cn/faq/492762.html" title="It turns out that text carousel and image carousel can also be realized using pure CSS!" class="phphistorical_Version2_mids_title">It turns out that text carousel and image carousel can also be realized using pure CSS!</a> <span class="Articlelist_txts_time">Jun 10, 2022 pm 01:00 PM</span> <p class="Articlelist_txts_p">How to create text carousel and image carousel? The first thing everyone thinks of is whether to use js. In fact, text carousel and image carousel can also be realized using pure CSS. Let’s take a look at the implementation method. I hope it will be helpful to everyone!</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/faq/491472.html" title="How to set animation rotation speed in css3" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202204/28/2022042816194912689.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="How to set animation rotation speed in css3" /> </a> <a href="https://www.php.cn/faq/491472.html" title="How to set animation rotation speed in css3" class="phphistorical_Version2_mids_title">How to set animation rotation speed in css3</a> <span class="Articlelist_txts_time">Apr 28, 2022 pm 04:32 PM</span> <p class="Articlelist_txts_p">In CSS3, you can use the "animation-timing-function" attribute to set the animation rotation speed. This attribute is used to specify how the animation will complete a cycle and set the speed curve of the animation. The syntax is "element {animation-timing-function: speed attribute value;}".</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/faq/491457.html" title="Does css3 animation effect have deformation?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202204/28/2022042814083763002.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Does css3 animation effect have deformation?" /> </a> <a href="https://www.php.cn/faq/491457.html" title="Does css3 animation effect have deformation?" class="phphistorical_Version2_mids_title">Does css3 animation effect have deformation?</a> <span class="Articlelist_txts_time">Apr 28, 2022 pm 02:20 PM</span> <p class="Articlelist_txts_p">The animation effect in css3 has deformation; you can use "animation: animation attribute @keyframes ..{..{transform: transformation attribute}}" to achieve deformation animation effect. The animation attribute is used to set the animation style, and the transform attribute is used to set the deformation style. .</p> </div> </div> <a href="https://www.php.cn/web-designer.html" class="phpgenera_Details_mainL4_botton"> <span>See all articles</span> <img src="/static/imghw/down_right.png" alt="" /> </a> </div> </div> </div> </main> <footer> <div class="footer"> <div class="footertop"> <img src="/static/imghw/logo.png" alt=""> <p>Public welfare online PHP training，Help PHP learners grow quickly！</p> </div> <div class="footermid"> <a href="https://www.php.cn/about/us.html">About us</a> <a href="https://www.php.cn/about/disclaimer.html">Disclaimer</a> <a href="https://www.php.cn/update/article_0_1.html">Sitemap</a> </div> <div class="footerbottom"> <p> © php.cn All rights reserved </p> </div> </div> </footer> <input type="hidden" id="verifycode" value="/captcha.html"> <script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script> <script src="/static/js/common_new.js"></script> <script type="text/javascript" src="/static/js/jquery.cookie.js?1746799615"></script> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' /> <script type='text/javascript' src='/static/js/viewer.min.js?1'></script> <script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script> <script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script> <script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function () { var u = "https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u + 'matomo.php']); _paq.push(['setSiteId', '9']); var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0]; g.async = true; g.src = u + 'matomo.js'; s.parentNode.insertBefore(g, s); })(); </script> <script> // top layui.use(function () { var util = layui.util; util.fixbar({ on: { mouseenter: function (type) { layer.tips(type, this, { tips: 4, fixed: true, }); }, mouseleave: function (type) { layer.closeAll("tips"); }, }, }); }); document.addEventListener("DOMContentLoaded", (event) => { // 定义一个函数来处理滚动链接的点击事件 function setupScrollLink(scrollLinkId, targetElementId) { const scrollLink = document.getElementById(scrollLinkId); const targetElement = document.getElementById(targetElementId); if (scrollLink && targetElement) { scrollLink.addEventListener("click", (e) => { e.preventDefault(); // 阻止默认链接行为 targetElement.scrollIntoView({ behavior: "smooth" }); // 平滑滚动到目标元素 }); } else { console.warn( `Either scroll link with ID '${scrollLinkId}' or target element with ID '${targetElementId}' not found.` ); } } // 使用该函数设置多个滚动链接 setupScrollLink("Article_Details_main1L2s_1", "article_main_title1"); setupScrollLink("Article_Details_main1L2s_2", "article_main_title2"); setupScrollLink("Article_Details_main1L2s_3", "article_main_title3"); setupScrollLink("Article_Details_main1L2s_4", "article_main_title4"); setupScrollLink("Article_Details_main1L2s_5", "article_main_title5"); setupScrollLink("Article_Details_main1L2s_6", "article_main_title6"); // 可以继续添加更多的滚动链接设置 }); window.addEventListener("scroll", function () { var fixedElement = document.getElementById("Article_Details_main1Lmain"); var scrollTop = window.scrollY || document.documentElement.scrollTop; // 兼容不同浏览器 var clientHeight = window.innerHeight || document.documentElement.clientHeight; // 视口高度 var scrollHeight = document.documentElement.scrollHeight; // 页面总高度 // 计算距离底部的距离 var distanceToBottom = scrollHeight - scrollTop - clientHeight; // 当距离底部小于或等于300px时，取消固定定位 if (distanceToBottom <= 980) { fixedElement.classList.remove("Article_Details_main1Lmain"); fixedElement.classList.add("Article_Details_main1Lmain_relative"); } else { // 否则，保持固定定位 fixedElement.classList.remove("Article_Details_main1Lmain_relative"); fixedElement.classList.add("Article_Details_main1Lmain"); } }); </script> <script> document.addEventListener('DOMContentLoaded', function() { const mainNav = document.querySelector('.Article_Details_main1Lmain'); const header = document.querySelector('header'); if (mainNav) { window.addEventListener('scroll', function() { const scrollPosition = window.scrollY; if (scrollPosition > 84) { mainNav.classList.add('fixed'); } else { mainNav.classList.remove('fixed'); } }); } }); </script> </body> </html>