Главная » Языки программирования

Css cursor text color

Содержание
  1. Как изменить курсор при наведении мыши в CSS
  2. Как сделать курсор в виде руки при наведении мыши на элемент списка
  3. Пример
  4. Пример
  5. Как изменить курсор гиперссылки при наведении мыши
  6. Пример
  7. Как установить изображение для курсора
  8. Пример
  9. Пример
  10. Пример со всеми видами курсора
  11. Пример
  12. caret — color
  13. Кратко
  14. Пример
  15. Как пишется
  16. Как понять
  17. Ещё пример
  18. На практике
  19. Миша Захаров советует

Как изменить курсор при наведении мыши в CSS

Почти все веб-страницы меняют курсоры для лучшего восприятия пользователем или без какой-либо причины. Настройка курсора является простым способом добавления дополнительного эффекта на вашей веб-странице.

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

Эта статья поможет вам контролировать, какими способами может курсор в CSS помочь в вопросе улучшения пользовательского восприятия.

Представим вам следующие методы контролирования курсора:

  • Как сделать курсор в виде руки при наведении мыши на элемент списка
  • Как изменить курсор гиперссылки при наведении мыши
  • Как установить изображение для курсора
  • Пример со всеми видами маркеров

Как сделать курсор в виде руки при наведении мыши на элемент списка

Код будет иметь следующий вид, если хотите установить курсор в виде указателя:

Давайте рассмотрим пример вышеуказанного метода:

Пример

html> html> head> title>Заголовок документа title> style> li< margin-bottom:15px; > li.pointer < cursor: pointer; > li:hover < background-color: #ccc; > style> head> body> h4>Наведите курсор мыши на элемент списка и увидите, как меняется курсор по умолчанию в указатель: h4> ul> li>Элемент списка 1 с курсором по умолчанию. li> li class="pointer">Элемент списка 2 с курсором-указателем по умолчанию. li> li>Элемент списка с с курсором по умолчанию. li> ul> body> html>

Другой пример, где меняется курсор-указатель. Здесь мы используем селектор :nth-child вместе с nth-child(odd) как cursor: progress и nth-child(even) как cursor: pointer для отдельных типов курсора на разных элементах.

Читайте также:  Javascript this attribute value

Пример

html> html> head> title>Заголовок документа title> style> li:nth-child(odd) < background: #1c87c9; cursor: progress; width: 50%; padding: 5px; > li:nth-child(even) < background: #ccc; cursor: pointer; width: 50%; padding: 5px; > style> head> body> p>Наведите курсор мыши на элементы, чтобы увидеть как меняется курсор: p> ul> li>Элемент списка 1 li> li>Элемент списка 2 li> li>Элемент списка 3 li> li>Элемент списка 4 li> li>Элемент списка 5 li> li>Элемент списка 6 li> li>Элемент списка 7 li> ul> body> html>

Как изменить курсор гиперссылки при наведении мыши

Известно, что курсор по умолчанию для гиперссылки устанавливается как «pointer». Если хотите изменить его, нужно указать тип курсора для элемента с помощью CSS селектора :hover.

Чтобы изменить «pointer» в «default», вам понадобится эта часть кода:

Смотрите следующий пример:

Пример

html> html> head> title>Заголовок документа title> style> .link:hover < cursor: default; > style> head> body> h4>Наведите курсор мыши на гиперссылку и увидите, как "pointer" меняется в "default": h4> p>a href="https://www.w3docs.com">W3docs a> ссылка с исходным видом "pointer". p> p>a class="link" href="https://www.w3docs.com">W3docs a>ссылка с измененным курсором "default". p> body> html>

Так как ссылки имеют color: blue и text-decoration: underline по умолчанию, рекомендуется изменить цвет и продолжить работу с гиперссылками.

Как установить изображение для курсора

Давайте научимся, как еще можно работать с курсором! Можно также установить выбранное вами изображение как курсор на вашей веб-странице.

После этой части кода установите свойство cursor как image:

.mycursor < cursor: url("myimage.png"), pointer; >

Не забудьте установить вид курсора, чтобы показать, когда браузер не сможет использовать предоставленное изображение. В противном случае, код не будет работать.

Это довольно интересный способ. Можете добавить его на вашу веб-страницу, и пользователи будут в восторге. Представьте, что у вас есть форма, которая соответствует определенной эмоции. Здесь отлично подойдет использование эмоджи.

Пример

html> html> head> title>Заголовок документа title> style> body < background: #eee; text-align: center; > button < display: inline-block; background-color: #1c87c9; color: #eee; margin: 25px; position: relative; width: 140px; height: 45px; border-radius: 3px; border: none; font-size: 1.5em; text-align: center; text-decoration: none; box-shadow: 0 2px 8px 0 #999; > button:hover < background-color: #999; color: #ffcc00; > #happy < cursor: url("/uploads/media/default/0001/02/ee4486d1b3fc998e444c3b0100c73db282760eb5.png"), auto; > #sad < cursor: url("/uploads/media/default/0001/02/38cb87a27305100311d9c96e5a5ebb88f04d8034.png"), auto; > #love < cursor: url("/uploads/media/default/0001/02/4be757cf6e9ffc865861649ca423654484ad3dc1.png"), auto; > style> head> body> h2>Какое у вас впечатление от нашей веб-страницы? h2> button id="happy">Радостное button> button id="sad">Грустное button> button id="love">Влюбленное button> body> html>

Рассмотрим другой пример, где использованы иконки. Можете использовать их из веб-страниц, где возможно применить код Base64, просто вставляя этот код в URL значение курсора. Или можно загрузить иконку на вашу веб-страницу и использовать URL для установления курсора.

Пример

html> html> head> title>Заголовок документа title> style> body < width: 600px; margin: 0.5em auto; > img < width: 280px; height: 186px; margin: 5px; display: inline-block; background-position: 50% 50%; > .dog < cursor: url("/uploads/media/default/0001/02/53f34c2d574ce31a424df7855ef3e8f2ece589d6.png"), auto; > .cactus < cursor: url("/uploads/media/default/0001/02/ea8020fd3fdb96affa77c8164f80d88f8c419e0f.png"), auto; > .nature < cursor: url("/uploads/media/default/0001/02/edcafd9e202ae5f2ae6ae839d21d1d642b2ace00.png"), auto; > .house < cursor: url("/uploads/media/default/0001/02/bb6f118f3b06838624b4297992457093f40fd92b.png"), auto; > style> head> body> img class="cactus" src="/uploads/media/default/0001/02/fc16e475b5cefcbe57924b1a4a3b3e38e936b77c.png" alt="cactus"> img class="nature" src="/uploads/media/default/0001/02/2a85e41725d19aeae7066836accaababd42e638d.png" alt="nature"> img class="dog" src="/uploads/media/default/0001/02/23df99002f94be0d1ca915058e2216c756be155e.png" alt="dog"> img class="house" src="/uploads/media/default/0001/02/1492763b186dabd60c4fbad49ce6d4ba3925b712.png" alt="house"> body> html>

Пример со всеми видами курсора

Здесь увидите пример, который содержит все возможные виды курсора.

Пример

html> html> head> title>Заголовок документа title> style> body < text-align: center; font-family: Roboto, Helvetica, Arial, sans-serif; > .cursor < display: flex; flex-wrap: wrap; > .cursor > div < flex: 120px; padding: 10px 2px; white-space: nowrap; border: 1px solid #666; border-radius: 5px; margin: 0 5px 5px 0; > .cursor > div:hover < background: #1c87c9; > .auto < cursor: auto; > .default < cursor: default; > .none < cursor: none; > .context-menu < cursor: context-menu; > .help < cursor: help; > .pointer < cursor: pointer; > .progress < cursor: progress; > .wait < cursor: wait; > .cell < cursor: cell; > .crosshair < cursor: crosshair; > .text < cursor: text; > .vertical-text < cursor: vertical-text; > .alias < cursor: alias; > .copy < cursor: copy; > .move < cursor: move; > .no-drop < cursor: no-drop; > .not-allowed < cursor: not-allowed; > .all-scroll < cursor: all-scroll; > .col-resize < cursor: col-resize; > .row-resize < cursor: row-resize; > .n-resize < cursor: n-resize; > .e-resize < cursor: e-resize; > .s-resize < cursor: s-resize; > .w-resize < cursor: w-resize; > .ns-resize < cursor: ns-resize; > .ew-resize < cursor: ew-resize; > .ne-resize < cursor: ne-resize; > .nw-resize < cursor: nw-resize; > .se-resize < cursor: se-resize; > .sw-resize < cursor: sw-resize; > .nesw-resize < cursor: nesw-resize; > .nwse-resize < cursor: nwse-resize; > .grab < cursor: -webkit-grab; cursor: grab; > .grabbing < cursor: -webkit-grabbing; cursor: grabbing; > .zoom-in < cursor: -webkit-zoom-in; cursor: zoom-in; > .zoom-out < cursor: -webkit-zoom-out; cursor: zoom-out; > style> head> body> h2>Пример свойства cursor h2> p> Наведите курсор мыши на элемент и увидите изменения: p> div class="cursor"> div class="auto">auto div> div class="default">default div> div class="none">none div> div class="context-menu">context-menu div> div class="help">help div> div class="pointer">pointer div> div class="progress">progress div> div class="wait">wait div> div class="cell">cell div> div class="crosshair">crosshair div> div class="text">text div> div class="vertical-text">vertical-text div> div class="alias">alias div> div class="copy">copy div> div class="move">move div> div class="no-drop">no-drop div> div class="not-allowed">not-allowed div> div class="all-scroll">all-scroll div> div class="col-resize">col-resize div> div class="row-resize">row-resize div> div class="n-resize">n-resize div> div class="s-resize">s-resize div> div class="e-resize">e-resize div> div class="w-resize">w-resize div> div class="ns-resize">ns-resize div> div class="ew-resize">ew-resize div> div class="ne-resize">ne-resize div> div class="nw-resize">nw-resize div> div class="se-resize">se-resize div> div class="sw-resize">sw-resize div> div class="nesw-resize">nesw-resize div> div class="nwse-resize">nwse-resize div> div class="grab">grab div> div class="grabbing">grabbing div> div class="zoom-in">zoom-in div> div class="zoom-out">zoom-out div> div> body> html>

Источник

caret — color

С помощью caret — color можно менять цвет курсора в режиме набора текста.

Время чтения: меньше 5 мин

Кратко

Скопировать ссылку «Кратко» Скопировано

Свойство caret — color задаёт цвет текстового курсора в полях ввода, например, или .

Пример

Скопировать ссылку «Пример» Скопировано

Курсор в поле ввода будет красного цвета:

   Красная каретка  label> Красная каретка input class="red" type="text" placeholder="Красная каретка"> label>      
 input  display: block; background-color: #ebebeb; font-family: "Roboto", sans-serif; padding: 5px;> .red  caret-color: #cc0000;> input  display: block; background-color: #ebebeb; font-family: "Roboto", sans-serif; padding: 5px; > .red  caret-color: #cc0000; >

В примере ниже ещё несколько полей ввода с каретками разного цвета:

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Значением для caret — color может быть любое поддерживаемое в CSS обозначение цвета. Кроме того доступны ключевые слова:

  • auto — значение по умолчанию, пользовательский агент выбирает подходящий цвет для каретки. Обычно это current Color , но пользовательский агент может выбрать другой цвет, чтобы обеспечить хорошую видимость и контраст с окружающим содержимым, принимая во внимание значение current Color , фон, тени и другие факторы.
  • transparent — можно использовать везде, где допустимо значение цвета. Это позволяет вам сделать элементы прозрачными, чтобы любой фоновый элемент был виден.
  • current Color — соответствует значению свойства color для текущего элемента. Это позволяет использовать значение цвета для свойств, которые не наследуют его по умолчанию.

Как понять

Скопировать ссылку «Как понять» Скопировано

Простое CSS-свойство, служащее единственной цели — кастомизации цвета для текстового курсора в полях ввода. Текстовый курсор — это видимый маркера, в который будет вставлен следующий введённый символ. Свойство является наследуемым, поэтому его можно указать глобально или для формы, и не указывать каждому полю ввода отдельно.

Ещё пример

Скопировать ссылку «Ещё пример» Скопировано

В данном примере мы создадим форму с несколькими полями ввода, для формы зададим оранжевый цвет каретки, будет наследовать свойство от формы, для переопределим его на синий, а для параграфа с атрибутом contenteditable зададим зелёный цвет каретки:

  
Зелёная каретка
 form> input type="text"> textarea cols="30" rows="10">textarea> form> p contenteditable>Зелёная кареткаp>      
 form  caret-color: #ff8630;> form textarea  caret-color: #0d47a1;> form p  caret-color: #00dd00;> form  caret-color: #ff8630; > form textarea  caret-color: #0d47a1; > form p  caret-color: #00dd00; >

На практике

Скопировать ссылку «На практике» Скопировано

Миша Захаров советует

Скопировать ссылку «Миша Захаров советует» Скопировано

🛠 Добавим немного радуги в инпут:

  input type="text">      
 @keyframes rainbow  0% 20% 40% 60% 80% 100% > input  display: block; width: 60vw; height: 50px; font-family: "Roboto", sans-serif; font-size: 50px; caret-color: red; background-color: rgb(255 255 255 / 0.1); color: #eee; border-radius: 1rem; border: 2px dotted rgb(255 255 255 / 0.1);> input:focus  animation: 3s infinite rainbow;> @keyframes rainbow  0%  caret-color: red; > 20%  caret-color: orange; > 40%  caret-color: yellow; > 60%  caret-color: green; > 80%  caret-color: blue; > 100%  caret-color: purple; > > input  display: block; width: 60vw; height: 50px; font-family: "Roboto", sans-serif; font-size: 50px; caret-color: red; background-color: rgb(255 255 255 / 0.1); color: #eee; border-radius: 1rem; border: 2px dotted rgb(255 255 255 / 0.1); > input:focus  animation: 3s infinite rainbow; >

Источник

Оцените статью
© 2024 Программирование