CSS 사용자 정의 설정 요소 깜박이는 커서 색상

이번에는 CSS 요소의 깜박이는 커서 색상을 사용자 정의하고 CSS 사용자 정의 요소의 깜박이는 커서 색상을 설정하는 노트를 가져오겠습니다.

머리말

비즈니스 요구로 인해 입력 상자의 텍스트는 떠 있는 커서와 다른 색상이어야 합니다. 이 문제에 대한 해결책을 책에서 찾는 것은 확실히 어렵고 매일의 축적과 경험이 필요합니다. .

해결책

• 사용:<a href="//m.sbmmt.com/wiki/971.html" target="_blank">:first-line<code>:<a href="//m.sbmmt.com/wiki/971.html" target="_blank">:first-line</a> 伪元素

• 使用 <a href="//m.sbmmt.com/wiki/861.html" target="_blank">text-shadow</a> 和 text-fill-color

• 使用 caret-color

::fist-line 修改元素

原理: 一般来说，设置input框的 color 属性会修改文本内容的颜色，同时顺带改变光标的颜色。而::first-line也可以设置首行文本内容的颜色, 利用选择器的权重比，::first-line覆盖了前者的color,最终得到了想要的结果。

input.form-control {
    color: #05d380; /* 光标颜色 */
}
input.form-control::first-line {
    color: #333; /* 文本颜色 */
}

缺陷: 只适用于input框, 同时微信 webview 不支持。需要写两个选择器。

text-shadow 和  text-fill-color

原理: 先利用color设置文本和光标的颜色,  然后利用 text-shadow 设置文本阴影覆盖文本颜色, 最后使用text-fill-color 将文本颜色置为透明。

.form-control {
    color: #05d380; /* 光标颜色 */
    text-shadow: 0 0 0 #333; /* 文本颜色 */
    -webkit-text-fill-color: transparent;
}

缺陷: text-fill-color 属性不太支持 firefox, 目前尽量使用 -webkit- 前缀。

caret-color

原理: 这是CSS3最新的属性，目的就是为了解决光标颜色的问题。

.form-control {
    color: #333; /* 文本颜色 */
    caret-color: #05d380; /* 光标颜色 */
}

缺陷: 低版本IE浏览器不支持

兼容性考虑

为了兼容多端设备显示情况，我们必须要将一些情况考虑进来, 使用@support 의사 요소

.form-control {
    color: #05d380; /* 光标颜色 */
    text-shadow: 0 0 0 #333; /* 文本颜色 */
    -webkit-text-fill-color: transparent;
}
@supports (caret-color: #05d380) {
    .form-control {
        color: #333; /* 文本颜色 */
        caret-color: #05d380; /* 光标颜色 */
    }
}

text-shadow 및 text-fill-color
원칙: 먼저 color를 사용하여 텍스트와 커서의 색상을 설정한 다음 text-shadow <a href="//m.sbmmt.com/code/6103.html" target="_blank">텍스트 그림자 </a>

rrreee결함: text-fill-color 속성이 firefox를 지원하지 않습니다. 현재 -webkit-를 사용해 보세요. > 접두사.

caret-color

위 내용은 CSS 사용자 정의 설정 요소 깜박이는 커서 색상의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!