> 웹 프론트엔드 > JS 튜토리얼 > CSS 사용자 정의 설정 요소 깜박이는 커서 색상

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

php中世界最好的语言
풀어 주다: 2018-05-25 11:32:26
원래의
3274명이 탐색했습니다.

이번에는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿