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

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

머리말

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

해결책

• 사용:<a href="http://www.php.cn/wiki/971.html" target="_blank">:first-line<code>:<a href="http://www.php.cn/wiki/971.html" target="_blank">:first-line</a> 伪元素

• 使用 <a href="http://www.php.cn/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 의사 요소

<a href="http://www.php.cn/wiki/861.html" target="_blank">text-shadow<h2 style="text-align: left;"></h2></a> 및 를 사용하세요. text-fill-color

caret-color

::fist-line을 사용하여 요소를 수정하세요

원리: 일반적으로 입력 상자의 color 속성을 ​​설정하면 텍스트 내용의 색상이 수정되고 커서의 색상도 변경됩니다. 그리고 ::first-line은 선택기의 가중치 비율을 사용하여 텍스트의 첫 번째 줄 색상을 설정할 수도 있으며, ::first-line은 이전의 color 를 선택하여 마침내 원하는 결과를 얻었습니다.

.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; /* 光标颜色 */
    }
}

결함: 입력 상자에만 해당되며 WeChat webview에서는 지원하지 않습니다. 두 개의 선택자를 작성해야 합니다.

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

를 설정하여 텍스트 색상을 덮고 마지막으로 text-fill-을 사용합니다. color 텍스트 색상을 투명하게 만듭니다.

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

caret-color

원칙: 이것은 CSS3의 최신 속성으로, 그 목적은 다음과 같습니다. 커서 색상 문제의 문제를 해결합니다. rrreee🎜결함: 낮은 버전 IE 브라우저 🎜지원되지 않음🎜 🎜 호환성 고려 사항🎜🎜다중 단말 장치의 디스플레이 상황과 호환되기 위해서는 몇 가지 상황을 고려하고 @support 🎜조건 판단🎜을 사용하여 사용 가능 여부를 감지해야 합니다. 제 환경은 모바일 디스플레이이기 때문에 모바일 단말과의 호환성이 요구되는 한, 두 번째와 세 번째 솔루션을 결합하면 기기의 넓은 영역을 커버할 수 있습니다. 🎜rrreee🎜요약🎜🎜최근 모바일 개발이 점점 늘어나고 있으며, 장치 호환성은 항상 더 나은 방법으로 디버깅하고 더 호환되는 코드를 작성하는 방법에 대한 골치 아픈 문제였습니다. 오류의 재발을 줄이기 위해서는 지속적인 요약이 필요합니다. 🎜🎜결국 모두에게 도움이 될 수 있어서 좋아요. 모두가 좋아하고 수집하길 바랍니다!!🎜🎜이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. PHP 중국어 웹사이트에 관련 기사가 있습니다! 🎜🎜추천 자료: 🎜🎜🎜MySQL 데이터베이스 액세스 거부 처리 방법🎜🎜🎜🎜🎜Linux 백그라운드 실행 노드 서비스 지침 및 단계 🎜🎜🎜

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