Чистый css меняет цвет курсора поля ввода

CSS

Я помню, что недавно Сюшен написал статью,CSS изменяет цвет курсора ввода.Введение в цвет вставки и другие методы изменения цвета, Я также нашел ошибку на демо-странице Xushen. Позже я обнаружил, что кто-то в области комментариев сказал, что это также может быть достигнуто с помощью text-shadow, а затем я наткнулся на нее, когда просматривал блог Da Мо Да.Как изменить цвет курсора управления формой, то есть использовать text-shadow для достижения, в духе практики я еще раз набрал код этих двух великих богов, и нашел более лаконичный способ написания (улыбается).

Сначала проследите за ходом мыслей Сюшеня

Первое использование новых свойств CSS3: Caret-Color

input {
    color: #333;
    caret-color: red;
}

Таким образом, это можно реализовать в современном браузере, который поддерживает атрибут цвета вставки, но современный браузер Safari не поддерживает этот атрибут Поэтому для совместимости с браузером Safari Сюшен дал следующий код:

input {
    color: red;
}
input::first-line {
    color: #333;
}

Совместимо с Safari, но Firefox снова капризничает, что мне делать? Давайте объединим их с помощью следующего кода и позаботимся об IE

input {
    color: #333;
    caret-color: red;
}
@supports (-webkit-mask: none) and (not (caret-color: red)) {
    input { color: red; }
    input::first-line { color: #333; }
}

Но вы с самого начала заметите, что это первая строка, поэтому она не подходит для многострочного текстового элемента textarea.

Далее давайте взглянем на большую идею пустыни.

Однако пустыня перевернута.Сначала я расскажу о предыдущем методе симуляции, а затем представлю новый атрибут CSS3 Caret-Color.Что касается метода нового атрибута, то он очень прост в использовании, поэтому я не буду подробности здесь Бар.

input,textarea { 
    color: rgb(60, 0, 248); /* 光标的颜色*/ 
    text-shadow: 0px 0px 0px #D60B0B; /* 文本颜色 */ 
    -webkit-text-fill-color: transparent; 
}

На самом деле принцип тот же, поскольку цвет курсора совпадает с цветом цвета, установите цвет на желаемый цвет курсора, а затем с помощью CSS измените цвет текста.

Очевидно, text-shadow может полностью копировать текстовое содержимое, а затем использовать атрибут -webkit-text-fill-color, чтобы сделать исходный цвет текста прозрачным, тем самым раскрывая text-shadow, по сути, по сравнению с первым- Что касается линейки, то совместимость лучше.

А вот и точка, смотри, как я преображаюсь!

Для вещей, которые не очень понятны, все же необходимо проверить их, чтобы углубить понимание и расширить знания.

Когда я запросил свойство -webkit-text-fill-color, я обнаружил, что функция этого продукта оказалась следующей:Получить или установить цвет заливки текста в объектеЯ вайпнул, готовые свойства не используются, и приходится обходиться, чтобы использовать text-shadow (правда не понимаю зачем). Две строчки кода решают проблему:

.input5 {
    color: red;
    -webkit-text-fill-color: #333;
}

Затем IE попадает в ловушку

.input5 {
    color: red;
    color\0: #333;
    -webkit-text-fill-color: #333;
}

Отлично! Вот как это выглядит.

Дополнение: кажется, что сафари уже изначально поддерживает цвет каретки, ну... это только для справки.

Категории