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

資訊專欄INFORMATION COLUMN

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

curried / 1056人閱讀

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

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

使用 ::first-line 偽元素

使用 text-shadow 和 text-fill-color

使用 caret-color

::fist-line 修改元素

原理

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

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

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

缺陷

只適用于input框, 同時微信 webview 不支持。需要寫兩個css樣式。

text-shadow 和 text-fill-color

原理

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

.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)顏色的問題。 實際演示

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

缺陷

低版本IE瀏覽器不支持

兼容性考慮

為了兼容多端設(shè)備顯示情況，我們必須要將一些情況考慮進(jìn)來, 使用@support 條件判斷來檢測是否可用。因為我的環(huán)境在于移動端展示，所以只要要求進(jìn)行兼容移動端，結(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é)

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

最后能給大家?guī)韼椭秃?，希望大家多點(diǎn)贊，收藏 !!

周邊知識

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

W3cplus 介紹 caret-color

自定義 command line

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

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

相關(guān)文章

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

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

    felix0913 評論0 收藏0

  • 偏門卻又實用的 CSS 樣式

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

    Michael_Ding 評論0 收藏0

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

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

    KunMinX 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<