Layui如何自定义表单placeholder的样式-Layui教程-PHP中文网

在layui中修改input placeholder颜色和字号，需用.layui-input::placeholder及各浏览器前缀伪元素（如::-webkit-input-placeholder）分别设置，并确保选择器优先级足够、无其他样式覆盖。

如何用 css 修改 layui input 的 placeholder 颜色和字号

直接写 input::placeholder 不够——layui 的 .layui-input 是带封装的，必须确保样式优先级足够、且覆盖所有浏览器前缀。最稳妥的方式是加类名限定范围，避免全局污染。

推荐在页面 <style></style> 或独立 CSS 文件中写：

.layui-input::placeholder {
  color: #999;
  font-size: 14px;
}
.layui-input::-webkit-input-placeholder { color: #999; font-size: 14px; }
.layui-input::-moz-placeholder         { color: #999; font-size: 14px; }
.layui-input:-ms-input-placeholder     { color: #999; font-size: 14px; }
.layui-input::-ms-input-placeholder     { color: #999; font-size: 14px; }

如果只改某一个输入框（比如登录页用户名），给它加自定义 class：<input class="layui-input login-input">，再写 .login-input::placeholder
若发现样式不生效，检查是否被其他 CSS 覆盖（比如用了 !important 的第三方样式），或是否漏写了某个前缀（尤其是 Firefox 的 ::-moz-placeholder 和 ::-moz-placeholder 两个写法都存在，建议都写上）

layer.prompt 弹出层里怎么设 placeholder 文字

layer.prompt 不接受 placeholder 参数，传了也无效。这是 API 设计限制，不是你配置错了。

必须等弹窗 DOM 渲染完成，在 success 回调里操作：

layer.prompt({
  title: '请输入内容',
  success: function(layero) {
    setTimeout(() => {
      const input = layero.find('.layui-layer-input');
      if (input.length) {
        input.attr('placeholder', '这里写提示文字');
      }
    }, 10);
  }
});

setTimeout 延迟至少 10ms，否则 DOM 可能还没挂载完
务必用 layero.find() 限定查找范围，避免误改页面其他同名元素
如果自定义了 layer 样式（比如重写了 .layui-layer-input），可能影响 placeholder 显示，可临时加 input[placeholder] { opacity: 1 !important; } 排查

table 编辑模式下单元格 input 如何加 placeholder

Layui 官方 table 的 edit 模式默认不支持 placeholder，但可以通过修改列配置 + 小量源码补丁实现。

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

在 table.render() 的 cols 中写：{ field: 'name', title: '姓名', edit: 'text', placeholder: '请输入姓名' }
打开 layui/lay/modules/table.js，找到这行代码（通常在 renderCell 方法附近）：r.edit&&e.push('data-edit="'+r.edit+'"')
在其后追加：r.placeholder&&e.push('data-placeholder="'+r.placeholder+'"')
再找类似 var n=t('<input class="layui-input '+N+'">') 的构造语句，改成：var n=t('<input placeholder="'+(r.placeholder||'')+'" class="layui-input '+N+'">')
改完记得清缓存、重新加载 JS，否则无效

select 下拉框的 placeholder 怎么模拟

Layui 的 <select></select> 没有原生 placeholder 支持，<option value="">请选择</option> 会被渲染成真实选项，且无法禁用选中。真 placeholder 必须用 CSS 定位“盖”上去。

HTML 结构示例：

<div class="layui-form-item">
  <label class="layui-form-label">分类</label>
  <div class="layui-input-block select-placeholder-wrap">
    <div class="select-placeholder">请选择分类</div>
    <select name="category" lay-filter="category"></select>
</div>
</div>

CSS 关键点：

.select-placeholder-wrap { position: relative; }
.select-placeholder {
  position: absolute;
  left: 12px;
  top: 8px;
  color: #999;
  pointer-events: none;
  z-index: 1;
  background: #fff;
}
/* 选中后隐藏 placeholder */
.select-placeholder-wrap select + .select-placeholder {
  display: none;
}
.select-placeholder-wrap select:not(:valid) + .select-placeholder {
  display: block;
}