日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
CSS的:Placeholder-Shown偽類(lèi)有什么用？

使用此偽類(lèi)來(lái)設(shè)置當(dāng)前顯示占位符文本的輸入的樣式，換句話說(shuō)，用戶未在文本框中鍵入任何內(nèi)容 ??

根據(jù)您的輸入是否為空，應(yīng)用一些動(dòng)態(tài)樣式非常好 ??

 
 
 
 
      
  
  
  
  1. input:placeholder-shown { 
    2.   
  
  
  
  2.   border-color: pink; 
    3.   
  
  
  
  3. } 
    4.

它是如何工作的?

:placeholder-show 是CSS偽類(lèi)，可讓您將樣式應(yīng)用于具有占位符文本的 或  

結(jié)果：

  • 如果顯示占位符，則為粉紅色，表示用戶未輸入任何內(nèi)容
  • 如果未顯示任何占位符，則為黑色，表示用戶已鍵入內(nèi)容

:placeholder-showd必須具有占位符

如果元素沒(méi)有占位符文本，則此選擇器將不起作用。

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.  
    5.  
 
 

 
 
 
 
      
  
  
  
  1. input:placeholder-shown { 
    2.   
  
  
  
  2.   border-color: pink; 
    3.   
  
  
  
  3. } 
    4.

:placeholder-shown vs ::placeholder

因此，我們可以使用 :placeholder-shown 設(shè)置輸入元素的樣式。

 
 
 
 
      
  
  
  
  1. input:placeholder-shown { 
    2.   
  
  
  
  2.   border: 1px solid pink; 
    3.   
  
  
  
  3.   background: yellow; 
    4.   
  
  
  
  4.   color: green; 
    5.   
  
  
  
  5. } 
    6.

??嗯...注意到有些奇怪??——我們將顏色設(shè)置為：綠色，但沒(méi)有用。好吧，這是因?yàn)?:placeholder-shown 只針對(duì)輸入本身。但是對(duì)于實(shí)際的占位符文本，您必須使用偽元素 ::placeholder。

 
 
 
 
      
  
  
  
  1. input::placeholder { 
    2.   
  
  
  
  2.   color: green; 
    3.   
  
  
  
  3. } 
    4.

但是!當(dāng)我在處理這個(gè)問(wèn)題時(shí)，我注意到還有一些其他屬性，如果在 :placeholder-shown 級(jí)別應(yīng)用，將會(huì)影響到占位符文本。

 
 
 
 
      
  
  
  
  1. input:placeholder-shown { 
    2.   
  
  
  
  2.   font-style: italic; 
    3.   
  
  
  
  3.   text-transform: uppercase; 
    4.   
  
  
  
  4.   letter-spacing: 5px; 
    5.   
  
  
  
  5. } 
    6.

現(xiàn)在，我真的不知道為什么會(huì)發(fā)生這種情況 ???? 也許是因?yàn)檫@些屬性被占位符繼承了。

:placeholder-shown vs :empty

盡管 :placeholder-shown 是專(zhuān)門(mén)用于確定元素是否顯示占位符的。實(shí)際上，我們可以使用它來(lái)檢查輸入是否為空(當(dāng)然，假設(shè)所有輸入都有一個(gè)占位符)。因此，也許您的下一個(gè)問(wèn)題是，我們不能使用CSS empty嗎?好吧，讓我們檢查一下 ?????

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. input:empty { 
    4.   
  
  
  
  4.   border: 1px solid pink; 
    5.   
  
  
  
  5. } 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. input { 
    8.   
  
  
  
  8.   border: 1px solid black; 
    9.   
  
  
  
  9. } 
    10.

期待：

  • 如果為空則為粉紅色
  •  
  • 如果不為空為黑色

嗯...從這里開(kāi)始，您可能會(huì)認(rèn)為 :empty 似乎在起作用，因?yàn)槲覀兛吹降氖欠奂t色邊框。但這實(shí)際上不起作用??

粉紅色顯示的原因是因?yàn)閭晤?lèi)增加了特異性，類(lèi)似于類(lèi)選擇器(即 .form-input)比類(lèi)型選擇器(即 input)具有更高的特異性。高特異性選擇器將始終覆蓋低特異性設(shè)置的樣式。

這是判決!不要使用 :empty 檢查輸入元素是否為空?

如何在沒(méi)有占位符的情況下檢查輸入是否為空?

好了，所以我們檢查輸入是否為空的唯一方法是使用 :placeholder-shown。但是，如果我們的輸入元素沒(méi)有占位符，會(huì)發(fā)生什么情況?好吧，這是一個(gè)聰明的方法!傳入一個(gè)空字符串 " "。

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2. input:placeholder-shown { 
    3.   
  
  
  
  3.   border-color: pink; 
    4.   
  
  
  
  4. } 
    5.

與其他選擇器組合

所以，我們可以針對(duì)顯示占位符文字的輸入元素，這很酷。換句話說(shuō)，如果顯示了占位符文本，那么一定意味著該元素是空的。利用這些知識(shí)，我們可以將這個(gè)偽類(lèi)與其他選擇器結(jié)合起來(lái)，做一些非常整潔的事情!讓我們來(lái)看看 ??。

反向 :placeholder-shown 為 :not

我們可以使用 :not 偽類(lèi)來(lái)做一些反向的事情。在這里，我們可以在輸入不是空的時(shí)候進(jìn)行目標(biāo)操作。

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2. input:not(:placeholder) { 
    3.   
  
  
  
  3.   border-color: green; 
    4.   
  
  
  
  4. } 
    5.

結(jié)果：

  • 綠色，如果不為空，則表示用戶已經(jīng)輸入了一些內(nèi)容。
  •  
  • 如果為空，則為黑色

浮動(dòng)標(biāo)簽

使用占位符而不使用標(biāo)簽的問(wèn)題之一就是無(wú)障礙，因?yàn)橐坏┠阍诖蜃值臅r(shí)候，占位符文字就沒(méi)有了，這可能會(huì)導(dǎo)致用戶的困惑。一個(gè)真正好的解決方案是浮動(dòng)標(biāo)簽。最初，占位符文本顯示時(shí)沒(méi)有標(biāo)簽，而一旦用戶開(kāi)始輸入，標(biāo)簽就會(huì)出現(xiàn)。這樣一來(lái)，你仍然可以在不影響用戶體驗(yàn)和可訪問(wèn)性的前提下，保持表單的簡(jiǎn)潔性。雙贏 ??

而這是可以用純CSS實(shí)現(xiàn)的，我們只需要將 placeholder-shown 與 :not 和 + 結(jié)合起來(lái)就可以了。這是一個(gè)超級(jí)簡(jiǎn)化版的浮動(dòng)標(biāo)簽。

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2. NAME 
    3.   
  
  
  
  3. label { 
    4.   
  
  
  
  4.   display: none; 
    5.   
  
  
  
  5.   position: absolute; 
    6.   
  
  
  
  6.   top: 0; 
    7.   
  
  
  
  7. } 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9. input:not(:placeholder-shown) + label { 
    10.   
  
  
  
  10.   display: block; 
    11.   
  
  
  
  11. } 
    12.

瀏覽器支持

對(duì) :placeholder-shown 的支持非常好!這包括Internet Explorer(是的，我和你一樣驚訝??)。但是，對(duì)于IE，你需要使用非標(biāo)準(zhǔn)名稱(chēng) :-ms-input-placeholder。


當(dāng)前文章：CSS的:Placeholder-Shown偽類(lèi)有什么用？
新聞來(lái)源：http://m.5511xx.com/article/cddejgg.html