在Layui中修改input placeholder颜色和字号，需用.layui-input::placeholder及各浏览器前缀伪元素（如::-webkit-input-placeholder）分别设置，并确保选择器优先级足够、无其他样式覆盖。
如何用 CSS 修改 Layui input 的 placeholder 颜色和字号
直接写 input::placeholder 不够——layui 的 .layui-input 是带封装的，必须确保样式优先级足够、且覆盖所有浏览器前缀。最稳妥的方式是加类名限定范围，避免全局污染。
- 推荐在页面
<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，但可以通过修改列配置 + 小量源码补丁实现。
- 在
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> 没有原生 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;
}
- 注意：要配合
form.render()触发 Layui 重新解析，否则 select 初始化后 placeholder 可能错位
实际项目里最容易忽略的是 placeholder 的「状态响应」——比如 disabled 状态下要不要显示、表单验证失败后 placeholder 是否该保留。这些得靠 JS 主动控制 input 的 disabled 和 placeholder 属性联动，不能只靠 CSS。
