深入CSS属性(八): ::placeholder VS :placeholder-shown_html/css_WEB-ITnose
说到这个两个属性::placeholder大家可能都很熟悉,在移动端以及高端浏览器中都有使用,但是:placeholder-shown可能了解的比较少,本篇文章将和大家一起探讨两者的不同及基本应用. placeholder 即”占位符”,在form表单input/ textarea上可以应用placeholder属性,如果你对伪类和伪元素的异同不甚了解,可以参考 “CSS伪类和伪元素的异同”.下面就来讲讲二者的不同:
一. 伪类与伪元素
:placeholder-shown 伪类, Selectors Level 4草案新增 ::placeholder 伪元素, CSS Pseudo-Elements Module Level 4新增
:placeholder-shown, being a pseudo-class, has to select an existing element – it selects the input whenever you’re in the placeholder-showing state. The ::placeholder pseudo-element wraps the actual placeholder text.
二. 兼容性
:placeholder-shown Chrome/Safari/Opera浏览器支持较好,移动端浏览器支持较差,参考链接: CanIUse::placeholder 现代浏览器基本都支持, 但是需要添加不同浏览器厂商前缀,IE10 以下浏览器不支持, 参考链接: CanIUse
三. 开发中使用
:placeholder-shown, 常用来设置input 没有输入时的提示,如下:
<style type="text/css">.text { width: 400px; height: 22px; line-height: 22px; border: 1px solid #ccc;}.demo:placeholder-shown { border-color: #00f; // 无输入时,边框显示蓝色 color: #f00; // 只对无输入时的光标颜色有效} </style><input type="text" class="demo" placeholder="请输入用户名称">
::placeholder ,常用来设置placeholder text文本的颜色,根据不同浏览器支持情况设置前缀:
<style type="text/css">.text { width: 400px; height: 22px; line-height: 22px; border: 1px solid #ccc;} ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #f00;}::-moz-placeholder { /* Firefox 19+ */ color: #f00;}:-ms-input-placeholder { /* IE 10+ */ color: #f00;}:-moz-placeholder { /* Firefox 18- */ color: #f00;} </style><input type="text" class="demo" placeholder="请输入用户名称">
那么你可能会问,如果我想兼容IE10以下浏览器该怎么办呢,那只能用js来实现了,具体可以参考这篇文章” placeholder属性多浏览器支持兼容性方案“, 当然还有个开源的 placeholder.js可以参考.
四. 支持的Styles
::placeholder 支持下面这些属性:(注意:不支持text-align属性) All properties that apply to thepseudo-element also apply to thepseudo-element, eg: font properties color background properties word-spacing letter-spacing text-decoration vertical-align text-transform line-height text-indent opacity::placeholder-shown ,支持的属性较多,使用起来也比较灵活,(支持text-align属性).
五. 补充如何实现select 元素placeholder
<style type="text/css"> .sel-placeholder { color: #999; /* 和input::placeholder 默认颜色一致 */ } .sel-placeholder option { color: #333; } .sel-placeholder option:first-child { color: #999; /* 第一个选项的颜色 */ }</style><form action="http://user/submit" method="post"> <select name="children"> <option disabled selected>请选择子女个数</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> <input type="submit" value="Submit"></form>
可以通过js 增加和删除类来改变选中是的select字体颜色. 当然,还有的像如下这样用的:
<form action="http://user/submit" method="post"> <select name="children"> <option selected hidden>select one</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> <input type="submit" value="Submit"></form>
如果你想知道有什么不同,可以写个实例运行下.

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

HTML、CSS和JavaScript在Web開發中的作用分別是:1.HTML定義網頁結構,2.CSS控製網頁樣式,3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML的未來趨勢是語義化和Web組件,CSS的未來趨勢是CSS-in-JS和CSSHoudini,JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果,Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積,CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡,Serverless簡化開發但需優化冷啟動問題。

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML、CSS和JavaScript在網頁開發中的角色分別是:HTML負責內容結構,CSS負責樣式,JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容,確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式,使其美觀易讀。 3.JavaScript通過腳本控製網頁行為,實現動態和交互功能。

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義,使用、、等標籤。 2.提供語義化標記,如、、等,提升SEO效果。 3.通過標籤實現用戶交互,需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號,需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1)htmlStructures andFormatSwebContentusingtags.2)itworkswithcsssforstylingandjavascript for Interactivity,增強WebevebDevelopment。

HTML、CSS和JavaScript是構建現代網頁的核心技術:1.HTML定義網頁結構,2.CSS負責網頁外觀,3.JavaScript提供網頁動態和交互性,它們共同作用,打造出用戶體驗良好的網站。
