CSS :placeholder-shown

原创

admin 7个月前 (08-23) 阅读数 26 #CSS

:placeholder-shown

:placeholder-shown CSS 伪类表示当前显示占位符文本的任何或元素。</p> <p>这个伪类在用户开始输入内容之前非常有用，可以用来改善表单元素的视觉体验。当输入框或文本区域显示占位符文本时，:placeholder-shown 伪类会匹配该元素，允许开发者应用特定的样式。</p> <p>使用 :placeholder-shown 可以实现多种效果，例如：</p> <ul> <li>改变输入框边框颜色以提示用户</li> <li>调整占位符文本的样式</li> <li>添加浮动标签效果</li> <li>在用户开始输入前显示额外的提示信息</li> </ul> <p>需要注意的是，:placeholder-shown 伪类只在占位符文本可见时生效，一旦用户开始输入内容，该伪类将不再匹配相应的元素。</p> <p>这个特性在现代浏览器中得到了广泛支持，包括 Chrome、Firefox、Safari 和 Edge，使其成为改善表单用户体验的可靠选择。</p> <div class="rights"> <h5>版权声明</h5> <p>本文仅代表作者观点，不代表本站立场。<br>本文系作者授权本站发表，未经许可，不得转载。</p> </div> </div> <div class="Prev_Next"> <span>上一篇：<a href="https://dev.iamchen.cn/post/629.html">CSS picture-in-picture</a></span> <span>下一篇：<a href="https://dev.iamchen.cn/post/631.html">CSS playing</a></span> </div> </div> <div class="related main_list"> <div class="title">相关文章</div> <ul> <li> <strong> <a href="https://dev.iamchen.cn/post/973.html" title="CSS 使用CSS数学函数">CSS 使用CSS数学函数</a> </strong> <div class="listleft"> <p><a href="https://dev.iamchen.cn/post/973.html">使用CSS数学函数 CSS数学函数允许将属性值（如元素的height、animation-duration或font...</a></p> <div class="listtag"> </div> <div class="listinfo"> <span class="c">原创</span> <span class="time">7个月前<span class="datetime"> (08-23)</span></span> <span class="vew">52454阅读</span> <span class="cat"><a href="https://dev.iamchen.cn/category-5.html">#CSS</a></span> </div> </div> <div class="img"> <a href="https://dev.iamchen.cn/post/973.html"><img src="https://dev.iamchen.cn/zb_users/theme/yd1125free/include/random/8.jpg" alt="CSS 使用CSS数学函数"></a> </div> </li> <li> <strong> <a href="https://dev.iamchen.cn/post/972.html" title="CSS Textual data types">CSS Textual data types</a> </strong> <div class="listleft"> <p><a href="https://dev.iamchen.cn/post/972.html">文本数据类型每个CSS声明都由属性/值对组成。根据属性的不同，值可以包含各种数据类型，如单个关键字、整数、函数或不...</a></p> <div class="listtag"> </div> <div class="listinfo"> <span class="c">原创</span> <span class="time">7个月前<span class="datetime"> (08-23)</span></span> <span class="vew">43668阅读</span> <span class="cat"><a href="https://dev.iamchen.cn/category-5.html">#CSS</a></span> </div> </div> <div class="img"> <a href="https://dev.iamchen.cn/post/972.html"><img src="https://dev.iamchen.cn/zb_users/theme/yd1125free/include/random/3.jpg" alt="CSS Textual data types"></a> </div> </li> <li> <strong> <a href="https://dev.iamchen.cn/post/971.html" title="CSS 数字数据类型">CSS 数字数据类型</a> </strong> <div class="listleft"> <p><a href="https://dev.iamchen.cn/post/971.html">数字数据类型在CSS中，每个声明都由属性/值对组成。根据不同的属性，值可以包含各种数据类型，例如单个数字、关键字、...</a></p> <div class="listtag"> </div> <div class="listinfo"> <span class="c">原创</span> <span class="time">7个月前<span class="datetime"> (08-23)</span></span> <span class="vew">43677阅读</span> <span class="cat"><a href="https://dev.iamchen.cn/category-5.html">#CSS</a></span> </div> </div> <div class="img"> <a href="https://dev.iamchen.cn/post/971.html"><img src="https://dev.iamchen.cn/zb_users/theme/yd1125free/include/random/3.jpg" alt="CSS 数字数据类型"></a> </div> </li> <li> <strong> <a href="https://dev.iamchen.cn/post/970.html" title="CSS CSS 属性值定义语法">CSS CSS 属性值定义语法</a> </strong> <div class="listleft"> <p><a href="https://dev.iamchen.cn/post/970.html">CSS 属性值定义语法 CSS 属性值定义语法（CSS value definition syntax）是用来限定...</a></p> <div class="listtag"> </div> <div class="listinfo"> <span class="c">原创</span> <span class="time">7个月前<span class="datetime"> (08-23)</span></span> <span class="vew">52458阅读</span> <span class="cat"><a href="https://dev.iamchen.cn/category-5.html">#CSS</a></span> </div> </div> <div class="img"> <a href="https://dev.iamchen.cn/post/970.html"><img src="https://dev.iamchen.cn/zb_users/theme/yd1125free/include/random/1.jpg" alt="CSS CSS 属性值定义语法"></a> </div> </li> <li> <strong> <a href="https://dev.iamchen.cn/post/969.html" title="CSS 使用 CSS 过渡">CSS 使用 CSS 过渡</a> </strong> <div class="listleft"> <p><a href="https://dev.iamchen.cn/post/969.html">使用 CSS 过渡 CSS 过渡提供了一种在更改 CSS 属性时控制动画速度的方法。其可以让属性变化成为一个持续一段...</a></p> <div class="listtag"> </div> <div class="listinfo"> <span class="c">原创</span> <span class="time">7个月前<span class="datetime"> (08-23)</span></span> <span class="vew">52422阅读</span> <span class="cat"><a href="https://dev.iamchen.cn/category-5.html">#CSS</a></span> </div> </div> <div class="img"> <a href="https://dev.iamchen.cn/post/969.html"><img src="https://dev.iamchen.cn/zb_users/cache/thumbs/c987a71122a088cb774c43069034af49-180-120-1.png" alt="CSS 使用 CSS 过渡"></a> </div> </li> <li> <strong> <a href="https://dev.iamchen.cn/post/968.html" title="CSS 使用 CSS 变换">CSS 使用 CSS 变换</a> </strong> <div class="listleft"> <p><a href="https://dev.iamchen.cn/post/968.html">使用 CSS 变换通过改变坐标空间，CSS 变换可以在不影响正常文档流的情况下改变作用内容的位置。这篇指南提供了有...</a></p> <div class="listtag"> </div> <div class="listinfo"> <span class="c">原创</span> <span class="time">7个月前<span class="datetime"> (08-23)</span></span> <span class="vew">43664阅读</span> <span class="cat"><a href="https://dev.iamchen.cn/category-5.html">#CSS</a></span> </div> </div> <div class="img"> <a href="https://dev.iamchen.cn/post/968.html"><img src="https://dev.iamchen.cn/zb_users/theme/yd1125free/include/random/3.jpg" alt="CSS 使用 CSS 变换"></a> </div> </li> <li> <strong> <a href="https://dev.iamchen.cn/post/967.html" title="CSS Introduction to text shadows">CSS Introduction to text shadows</a> </strong> <div class="listleft"> <p><a href="https://dev.iamchen.cn/post/967.html">文本阴影入门指南您可以使用text-shadow属性为文本添加阴影效果。该属性接受逗号分隔的阴影值列表。每个阴影至...</a></p> <div class="listtag"> </div> <div class="listinfo"> <span class="c">原创</span> <span class="time">7个月前<span class="datetime"> (08-23)</span></span> <span class="vew">52447阅读</span> <span class="cat"><a href="https://dev.iamchen.cn/category-5.html">#CSS</a></span> </div> </div> <div class="img"> <a href="https://dev.iamchen.cn/post/967.html"><img src="https://dev.iamchen.cn/zb_users/theme/yd1125free/include/random/3.jpg" alt="CSS Introduction to text shadows"></a> </div> </li> <li> <strong> <a href="https://dev.iamchen.cn/post/966.html" title="CSS HTML、CSS 和 DOM 中的空白符是如何处理的">CSS HTML、CSS 和 DOM 中的空白符是如何处理的</a> </strong> <div class="listleft"> <p><a href="https://dev.iamchen.cn/post/966.html">HTML、CSS 和 DOM 中的空白符是如何处理的在 DOM 中，空白符的存在会导致布局问题，并使内容树的操作变...</a></p> <div class="listtag"> </div> <div class="listinfo"> <span class="c">原创</span> <span class="time">7个月前<span class="datetime"> (08-23)</span></span> <span class="vew">52408阅读</span> <span class="cat"><a href="https://dev.iamchen.cn/category-5.html">#CSS</a></span> </div> </div> <div class="img"> <a href="https://dev.iamchen.cn/post/966.html"><img src="https://dev.iamchen.cn/zb_users/theme/yd1125free/include/random/9.jpg" alt="CSS HTML、CSS 和 DOM 中的空白符是如何处理的"></a> </div> </li> </ul> </div> </div>  <div class="main_side"> <div class="widget widget_user"> <div class="userimg"> <img src="https://dev.iamchen.cn/zb_users/avatar/0.png" alt="admin"/> <p><a href="https://dev.iamchen.cn/author-1.html" target="_blank">admin</a></p> </div> <div class="userpost"> <h5>作者文章</h5> <ul> <li> <a href="https://dev.iamchen.cn/post/973.html" target="_blank">CSS 使用CSS数学函数</a> <span>7个月前<span class="datetime"> (08-23)</span></span> </li> <li> <a href="https://dev.iamchen.cn/post/972.html" target="_blank">CSS Textual data types</a> <span>7个月前<span class="datetime"> (08-23)</span></span> </li> <li> <a href="https://dev.iamchen.cn/post/971.html" target="_blank">CSS 数字数据类型</a> <span>7个月前<span class="datetime"> (08-23)</span></span> </li> <li> <a href="https://dev.iamchen.cn/post/970.html" target="_blank">CSS CSS 属性值定义语法</a> <span>7个月前<span class="datetime"> (08-23)</span></span> </li> <li> <a href="https://dev.iamchen.cn/post/969.html" target="_blank">CSS 使用 CSS 过渡</a> <span>7个月前<span class="datetime"> (08-23)</span></span> </li> </ul> </div> <div class="umore"> <a href="https://dev.iamchen.cn/author-1.html" target="_blank" rel="nofollow">浏览更多</a> </div> </div> <div class="widget widget_hot"> <div class="title">热门</div> <ul> <li> <i>1</i> <a href="https://dev.iamchen.cn/post/5.html" target="_blank"> <strong>HTML 简介</strong> <span>HTML教程HTML代表超文本标记语言，这是Web上开发网页最广泛使用的语言。HTML由Berners-Lee于1991年底创建，但“HTML 2.0”是1995年发布的第一个标准HTML规范。HTML 4.01是HTML的一个主要版本，于...</span> </a> </li><li> <i>2</i> <a href="https://dev.iamchen.cn/post/6.html" target="_blank"> <strong>HTML - 编辑器</strong> <span>要学习HTML，我们建议您使用Notepad等文本编辑器，因为Notepad将帮助您了解每个标签的要求，它不会单独建议任何内容。什么是HTML编辑器？HTML编辑器是编写和运行（在某些情况下）HTML代码的工具。用户可以使用多个HTML编辑...</span> </a> </li><li> <i>3</i> <a href="https://dev.iamchen.cn/post/7.html" target="_blank"> <strong>HTML - 基本标签</strong> <span>HTML标签是用于定义文档结构的HTML的基本元素。这些是用尖括号（和）包围的字母或单词。通常，大多数HTML标签都包含一个Opening和一个Close标签。每个标签都有不同的含义，浏览器会读取这些标签并相应地显示其包含的内容。例如，如果...</span> </a> </li><li> <i>4</i> <a href="https://dev.iamchen.cn/post/11.html" target="_blank"> <strong>HTML - History and Evolution</strong> <span>From 1990 to 1995, HTML underwent changes and extensions, initially at CERN and then at the IETF. The World Wide Web Con...</span> </a> </li><li> <i>5</i> <a href="https://dev.iamchen.cn/post/970.html" target="_blank"> <strong>CSS CSS 属性值定义语法</strong> <span>CSS 属性值定义语法 CSS 属性值定义语法（CSS value definition syntax）是用来限定 CSS 属性合法取值的专门语法。在此基础之上，一个 CSS 属性的合法取值也由语义所限制，比如一些数字必须是正数。 C...</span> </a> </li><li> <i>6</i> <a href="https://dev.iamchen.cn/post/973.html" target="_blank"> <strong>CSS 使用CSS数学函数</strong> <span>使用CSS数学函数 CSS数学函数允许将属性值（如元素的height、animation-duration或font-size）编写为数学表达式。在不使用任何数学的情况下，内置的rem、vw和%等CSS单位通常足够灵活，可以样式化H...</span> </a> </li><li> <i>7</i> <a href="https://dev.iamchen.cn/post/967.html" target="_blank"> <strong>CSS Introduction to text shadows</strong> <span>文本阴影入门指南您可以使用text-shadow属性为文本添加阴影效果。该属性接受逗号分隔的阴影值列表。每个阴影至少需要两个长度值，但可以包含多达三个长度值和一个颜色值。 css text-shadow: 1px 3px;...</span> </a> </li><li> <i>8</i> <a href="https://dev.iamchen.cn/post/965.html" target="_blank"> <strong>CSS 包装和断开文本</strong> <span>包装和断开文本本指南解释了在CSS中管理溢出文本的各种方法。...</span> </a> </li><li> <i>9</i> <a href="https://dev.iamchen.cn/post/969.html" target="_blank"> <strong>CSS 使用 CSS 过渡</strong> <span>使用 CSS 过渡 CSS 过渡提供了一种在更改 CSS 属性时控制动画速度的方法。其可以让属性变化成为一个持续一段时间的，而不是立即生效的过程。比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS 过渡后该元素...</span> </a> </li><li> <i>10</i> <a href="https://dev.iamchen.cn/post/966.html" target="_blank"> <strong>CSS HTML、CSS 和 DOM 中的空白符是如何处理的</strong> <span>HTML、CSS 和 DOM 中的空白符是如何处理的在 DOM 中，空白符的存在会导致布局问题，并使内容树的操作变得困难，这取决于它的位置。这篇文章探讨了什么时候会出现困难，并研究了如何缓解由此产生的问题。什么是空白符空白符是...</span> </a> </li> </ul> </div> <div class="widget widget_previous"> <div class="title">最新文章</div> <ul> <li> <a href="https://dev.iamchen.cn/post/973.html" target="_blank" title="CSS 使用CSS数学函数">CSS 使用CSS数学函数</a> <span>7个月前<span class="datetime"> (08-23)</span></span> </li> <li> <a href="https://dev.iamchen.cn/post/972.html" target="_blank" title="CSS Textual data types">CSS Textual data types</a> <span>7个月前<span class="datetime"> (08-23)</span></span> </li> <li> <a href="https://dev.iamchen.cn/post/971.html" target="_blank" title="CSS 数字数据类型">CSS 数字数据类型</a> <span>7个月前<span class="datetime"> (08-23)</span></span> </li> <li> <a href="https://dev.iamchen.cn/post/970.html" target="_blank" title="CSS CSS 属性值定义语法">CSS CSS 属性值定义语法</a> <span>7个月前<span class="datetime"> (08-23)</span></span> </li> <li> <a href="https://dev.iamchen.cn/post/969.html" target="_blank" title="CSS 使用 CSS 过渡">CSS 使用 CSS 过渡</a> <span>7个月前<span class="datetime"> (08-23)</span></span> </li> <li> <a href="https://dev.iamchen.cn/post/968.html" target="_blank" title="CSS 使用 CSS 变换">CSS 使用 CSS 变换</a> <span>7个月前<span class="datetime"> (08-23)</span></span> </li> <li> <a href="https://dev.iamchen.cn/post/967.html" target="_blank" title="CSS Introduction to text shadows">CSS Introduction to text shadows</a> <span>7个月前<span class="datetime"> (08-23)</span></span> </li> <li> <a href="https://dev.iamchen.cn/post/966.html" target="_blank" title="CSS HTML、CSS 和 DOM 中的空白符是如何处理的">CSS HTML、CSS 和 DOM 中的空白符是如何处理的</a> <span>7个月前<span class="datetime"> (08-23)</span></span> </li> <li> <a href="https://dev.iamchen.cn/post/965.html" target="_blank" title="CSS 包装和断开文本">CSS 包装和断开文本</a> <span>7个月前<span class="datetime"> (08-23)</span></span> </li> <li> <a href="https://dev.iamchen.cn/post/964.html" target="_blank" title="CSS CSS error handling">CSS CSS error handling</a> <span>7个月前<span class="datetime"> (08-23)</span></span> </li> </ul> </div> <div class="widget widget_tags"> <div class="title">标签列表</div> <ul></ul> </div> </div></div> <div class="footer"> <div class="container">闽ICP备2022017130号-1 <br> <span style="display:none">Powered By <a href="https://www.zblogcn.com/" title="Z-BlogPHP 1.7.4 Build 173430" target="_blank" rel="noopener noreferrer">Z-BlogPHP</a> Theme By <a href="https://www.htmlit.com.cn/" target="_blank">编程老白</a></span></div> </div><div id="goTop" class="goTop"><i class="fa fa-angle-up"></i></div><script src="https://dev.iamchen.cn/zb_users/theme/yd1125free/script/common.js?v=1.2.4" type="text/javascript"></script> <script src="https://dev.iamchen.cn/zb_users/theme/yd1125free/script/custom.js?v=1.2.4" type="text/javascript"></script> <script>jQuery(document).ready(function($) {jQuery('.main_left').theiaStickySidebar({ additionalMarginTop: 10,});});</script></body> </html>