[CSS 3]요소 반 짝 임 커서 의 색 을 편집 할 수 있 는 사용자 정의 설정

머리말
업무 수요 로 인해 우리 의 input 상자 안의 텍스트 와 떠 있 는 커서 의 색상 이 다 르 기 때문에 이런 문 제 는 책 에서 해결 방법 을 찾기 어 려 울 것 입 니 다.평소의 기초 와 경험 을 통 해 쌓 아야 합 니 다.
해결 방안

사용::first-line위조 원소

사용text-shadow과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 상자 에 만 적용 되 며,위 챗 웹 뷰 는 지원 되 지 않 습 니 다.css 스타일 두 개 를 써 야 합 니 다.
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;
}

/*        */
.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의 최신 속성 으로 커서 색상 문 제 를 해결 하기 위해 서 입 니 다.실제 시범

.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; /*      */
    }
}

작은 매듭
최근 의 수요 에서 모 바 일 개발 이 갈수 록 많아 지고 있 는데 설비 의 호환성 은 줄곧 골 치 아 픈 일이 다.어떻게 더 좋 은 방식 으로 디 버 깅 을 하고 호환성 이 강 한 코드 를 쓸 수 있 는 지.필요 한 것 은 끊임없이 정리 하고 오류 의 반복 을 줄 이 는 것 이다.
마지막 으로 여러분 에 게 도움 을 줄 수 있 으 면 좋 겠 습 니 다.여러분 들 이 많이 눌 러 주시 고 소장 해 주시 기 바 랍 니 다!!
주변 지식

CSS 커서 색 삽입 caret-color 프로필 변경

W3cplus 소개 caret-color

사용자 정의 명령 줄