css改input变输入框光标颜色demo效果示例(整理)

简介: css改input变输入框光标颜色demo效果示例(整理)
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>改变输入框光标颜色</title>
    <style>
      input {
        color: #333;
        caret-color: red;
      }
    </style>
  </head>
  <body>
    <!-- Safari以及IE浏览器有兼容问题 -->
    <input value="改变输入框光标颜色">
  </body>
</html>
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>改变输入框光标颜色</title>
    <style>
      .input {
        color: red;
      }
      .input::first-line {
        color: #333;
      }
    </style>
  </head>
  <body>
    <!-- Safari以及IE浏览器有兼容问题 -->
    <input value="改变输入框光标颜色" class="input" />
  </body>
</html>
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>最终版--改变输入框光标颜色</title>
    <style>
      .center {
        color: #333;
        caret-color: red;
      }
      @supports (-webkit-mask: none) and (not (caret-color: red)) {
        .center {
          color: red;
        }
        .center::first-line {
          color: #333;
        }
      }
    </style>
  </head>
  <body>
    <input value="混合兼容处理" class="center" />
  </body>
</html>

相关文章
|
27天前
|
前端开发 内存技术
CSS动画示例(上一篇是CSS过渡…)
CSS动画示例(上一篇是CSS过渡…)
15 1
|
1月前
|
前端开发 计算机视觉 开发者
利用CSS改变图片颜色的100种方法!
利用CSS改变图片颜色的100种方法!
33 1
|
3月前
|
前端开发
CSS中颜色的定义
CSS中颜色的定义
28 0
|
16天前
|
前端开发 UED
CSS——如何取消a链接点击时的背景颜色
CSS——如何取消a链接点击时的背景颜色
8 1
|
27天前
|
前端开发
CSS3中的动画示例
CSS3中的动画示例
8 1
|
1月前
|
前端开发
编程笔记 html5&css&js 018 HTML颜色
编程笔记 html5&css&js 018 HTML颜色
|
2月前
CSS3渐变颜色
CSS3渐变颜色
18 0
|
4月前
|
前端开发
(css必看)禁止用户拖动,禁止选中复制,禁止输入框输入
(css必看)禁止用户拖动,禁止选中复制,禁止输入框输入
99 1
|
4月前
|
前端开发 UED
Css 如何取消a链接点击时的背景颜色
Css 如何取消a链接点击时的背景颜色
|
8天前
|
前端开发 JavaScript 开发工具
【HTML/CSS】入门导学篇
【HTML/CSS】入门导学篇
17 0