layui 中 css 如何设置input placeholder 字体颜色和大小

 在 Layui 中设置输入框(input)的占位符(placeholder)的字体颜色和大小,可以通过 CSS 来实现。以下是具体的步骤:

1. 添加 CSS 样式:在你的 CSS 文件或 <style> 标签中添加自定义样式。

2. 使用伪元素选择器:针对不同浏览器,使用不同的伪元素选择器来设置样式。

3. 应用样式:确保这些样式应用到你的 Layui 输入框。 

/* 设置 placeholder 的字体颜色和大小 */
input::placeholder {
    color: #888;  /* 颜色 */
    font-size: 14px;  /* 字体大小 */
}

/* 针对 Webkit 内核浏览器(如 Chrome、Safari) */
input::-webkit-input-placeholder {
    color: #888;
    font-size: 14px;
}

/* 针对 Mozilla 内核浏览器(如 Firefox) */
input::-moz-placeholder {
    color: #888;
    font-size: 14px;
}

/* 针对 Internet Explorer 10+ */
input:-ms-input-placeholder {
    color: #888;
    font-size: 14px;
}

/* 针对 Microsoft Edge */
input::-ms-input-placeholder {
    color: #888;
    font-size: 14px;
}

例如,你可以将这些样式放在你的主样式表文件(如 style.css)中,或者直接在 HTML 文件中的 <style> 标签内定义。

以下是一个完整的示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Layui Input Placeholder Styling</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-v2.5.6/layui/css/layui.css">
    <style>
        /* 设置 placeholder 的字体颜色和大小 */
        input::placeholder {
            color: #888;  /* 颜色 */
            font-size: 14px;  /* 字体大小 */
        }

        /* 针对 Webkit 内核浏览器(如 Chrome、Safari) */
        input::-webkit-input-placeholder {
            color: #888;
            font-size: 14px;
        }

        /* 针对 Mozilla 内核浏览器(如 Firefox) */
        input::-moz-placeholder {
            color: #888;
            font-size: 14px;
        }

        /* 针对 Internet Explorer 10+ */
        input:-ms-input-placeholder {
            color: #888;
            font-size: 14px;
        }

        /* 针对 Microsoft Edge */
        input::-ms-input-placeholder {
            color: #888;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="layui-form">
        <input type="text" placeholder="请输入内容" class="layui-input">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/layui-v2.5.6/layui/layui.js"></script>
</body>
</html>

相关推荐

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-09 16:48:12       66 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-09 16:48:12       70 阅读
  3. 在Django里面运行非项目文件

    2024-07-09 16:48:12       57 阅读
  4. Python语言-面向对象

    2024-07-09 16:48:12       68 阅读

热门阅读

  1. 社交媒体原生应用开发:Facebook的创新之路

    2024-07-09 16:48:12       36 阅读
  2. Gunicorn+Flask+Docker初体验

    2024-07-09 16:48:12       27 阅读
  3. 常用目标检测的格式转换脚本文件txt,json等

    2024-07-09 16:48:12       28 阅读
  4. 信息收集-arping

    2024-07-09 16:48:12       24 阅读
  5. flutter如何实现点击一文字后 打开对应的超链接

    2024-07-09 16:48:12       24 阅读
  6. TCP协议是安全的吗?

    2024-07-09 16:48:12       50 阅读
  7. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-07-09 16:48:12       39 阅读
  8. 【Python教程】压缩PDF文件大小

    2024-07-09 16:48:12       48 阅读
  9. 通过文章id递归查询所有评论(xml)

    2024-07-09 16:48:12       55 阅读