成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

【CSS3】自定義設(shè)置可編輯元素閃爍光標(biāo)的顏色

felix0913 / 2660人閱讀

摘要：解決方案使用偽元素使用和使用修改元素原理一般來(lái)說(shuō)，設(shè)置框的屬性會(huì)修改文本內(nèi)容的顏色，同時(shí)順帶改變光標(biāo)的顏色。和原理先利用設(shè)置文本和光標(biāo)的顏色然后利用設(shè)置文本陰影覆蓋文本顏色最后使用將文本顏色置為透明。

前言 
因?yàn)闃I(yè)務(wù)需求, 要求我們的input框內(nèi)的文本與懸浮的光標(biāo)顏色不同, 這樣的問(wèn)題肯定在書(shū)本上很難找到解決辦法， 需要通過(guò)平時(shí)的基礎(chǔ)積累和經(jīng)驗(yàn)。
解決方案

使用 ::first-line 偽元素

使用 text-shadow 和 text-fill-color

使用 caret-color

::fist-line 修改元素

原理

一般來(lái)說(shuō)，設(shè)置input框的 color 屬性會(huì)修改文本內(nèi)容的顏色，同時(shí)順帶改變光標(biāo)的顏色。而::first-line也可以設(shè)置首行文本內(nèi)容的顏色, 利用選擇器的權(quán)重比，::first-line覆蓋了前者的color,最終得到了想要的結(jié)果。實(shí)際演示

input.form-control {
    color: #05d380; /* 光標(biāo)顏色 */
}

input.form-control::first-line {
    color: #333; /* 文本顏色 */
}

缺陷

只適用于input框, 同時(shí)微信 webview 不支持。需要寫(xiě)兩個(gè)css樣式。

text-shadow 和 text-fill-color

原理

先利用color設(shè)置文本和光標(biāo)的顏色, 然后利用 text-shadow 設(shè)置文本陰影覆蓋文本顏色, 最后使用text-fill-color 將文本顏色置為透明。實(shí)際演示

.form-control {
    color: #05d380; /* 光標(biāo)顏色 */
    text-shadow: 0 0 0 #333; /* 文本顏色 */
    -webkit-text-fill-color: transparent;
}

/* 設(shè)置暗文顏色 */
.form-control::-webkit-input-placeholder{ 
    color: rgb(60, 0, 248); /* 改變placeholder文本顏色 */ 
    text-shadow: none; 
    -webkit-text-fill-color: initial;
}

缺陷

text-fill-color 屬性不太支持 firefox, 目前盡量使用 -webkit- 前綴。

caret-color

原理

這是CSS3最新的屬性，目的就是為了解決光標(biāo)顏色的問(wèn)題。 實(shí)際演示

.form-control {
    color: #333; /* 文本顏色 */
    caret-color: #05d380; /* 光標(biāo)顏色 */
}

缺陷

低版本IE瀏覽器不支持

兼容性考慮

為了兼容多端設(shè)備顯示情況，我們必須要將一些情況考慮進(jìn)來(lái), 使用@support 條件判斷來(lái)檢測(cè)是否可用。因?yàn)槲业沫h(huán)境在于移動(dòng)端展示，所以只要要求進(jìn)行兼容移動(dòng)端，結(jié)合第二種和第三種解決方案，可以大面積覆蓋設(shè)備。

.form-control {
    color: #05d380; /* 光標(biāo)顏色 */
    text-shadow: 0 0 0 #333; /* 文本顏色 */
    -webkit-text-fill-color: transparent;
}

@supports (caret-color: #05d380) {
    .form-control {
        color: #333; /* 文本顏色 */
        caret-color: #05d380; /* 光標(biāo)顏色 */
    }
}
小結(jié)

最近的需求里，移動(dòng)端開(kāi)發(fā)越來(lái)越多，而設(shè)備兼容性一直都是頭疼的事情，如何更好的方式調(diào)試，寫(xiě)出兼容性更強(qiáng)的代碼。需要的就是不斷總結(jié)，減少錯(cuò)誤重復(fù)發(fā)生。

最后能給大家?guī)?lái)幫助就好，希望大家多點(diǎn)贊，收藏 !!

周邊知識(shí)

CSS改變插入光標(biāo)顏色caret-color簡(jiǎn)介

W3cplus 介紹 caret-color

自定義 command line

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/52401.html

相關(guān)文章

  • 【CSS3】自定義設(shè)置可編輯元素閃爍光標(biāo)的顏色

    摘要：解決方案使用偽元素使用和使用修改元素原理一般來(lái)說(shuō)，設(shè)置框的屬性會(huì)修改文本內(nèi)容的顏色，同時(shí)順帶改變光標(biāo)的顏色。和原理先利用設(shè)置文本和光標(biāo)的顏色然后利用設(shè)置文本陰影覆蓋文本顏色最后使用將文本顏色置為透明。 前言 因?yàn)闃I(yè)務(wù)需求, 要求我們的input框內(nèi)的文本與懸浮的光標(biāo)顏色不同, 這樣的問(wèn)題肯定在書(shū)本上很難找到解決辦法， 需要通過(guò)平時(shí)的基礎(chǔ)積累和經(jīng)驗(yàn)。 解決方案 使用 ::first-l...

    curried 評(píng)論0 收藏0

  • 偏門(mén)卻又實(shí)用的 CSS 樣式

    摘要：實(shí)現(xiàn)不換行自動(dòng)換行強(qiáng)制換行不換行自動(dòng)換行強(qiáng)制換行常用的選擇器以下代碼是選擇父類(lèi)下第一個(gè)子節(jié)點(diǎn)，元素，建議學(xué)習(xí)這個(gè)樣式屬性的使用，很實(shí)用的。不允許負(fù)值用百分比指定起止色位置。::-Webkit-Input-Placeholder input 的 H5?placeholder?屬性，很好用，但不能直接改這個(gè)文字顏色，所以目前的解決方法就是用::input-placeholder屬性來(lái)改。 配合 ...

    Michael_Ding 評(píng)論0 收藏0

  • 一個(gè)前端程序猿的Sublime Text3的自我修養(yǎng)

    摘要：效果如下配置方法參考下的配置方法完美支持提供了比默認(rèn)更好的語(yǔ)法高亮，而且他完美支持。語(yǔ)法高亮默認(rèn)安裝的對(duì)的支持讓人抓狂，幀動(dòng)畫(huà)別開(kāi)玩笑了你只會(huì)看到一片白色的純文本一樣的代碼。事實(shí)上不光，我建議用完全替代原來(lái)的來(lái)完成語(yǔ)法高亮。 文章轉(zhuǎn)載自本人的博客《三省吾身丶丶》點(diǎn)擊查看喜歡的話(huà)請(qǐng)瘋狂的推薦吧！ ^_^ 本文章會(huì)在本人有插件或者設(shè)置更新時(shí)，進(jìn)行不定時(shí)更新 偷懶了，圖片地址直接設(shè)置的博客...

    KunMinX 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<