Layui表单必填项自动打红色*号

简介: Layui表单必填项自动打红色*号

一般的打星号写法:

<span style="color:red">*</span>

通过CSS更加规范统一整齐

<style>
  .layui-input{height:30px;} /* layui-input 默认太高了,这里固定高度*/
  label.required:after {   /* 给红色的必填项打红色星号(文字后)如果打前面用before*/
        content: ' *';
        color: red;
    }
</style>
  .layui-form-label.required:after {   /* 这种写法也可以*/
        content: ' *';
        color: red;
    }

html

<div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label required">用户名</label>
      <div class="layui-input-inline">
        <input type="tel" name="username" lay-verify="required" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label required">登入次数</label>
      <div class="layui-input-inline">
        <input type="text" name="logins" lay-verify="required" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>  


相关文章
|
6月前
表单项validator的校验tip未撑起高度,导致遮盖下边项的内容
表单项validator的校验tip未撑起高度,导致遮盖下边项的内容
31 0
表单项validator的校验tip未撑起高度,导致遮盖下边项的内容
|
6月前
form获取表单项的值
form获取表单项的值
|
JavaScript
Layui 弹层组件 - 基础参数3
Layui 弹层组件 - 基础参数3
73 0
|
JavaScript 前端开发
Layui 弹层组件 - 基础参数1
Layui 弹层组件 - 基础参数1
94 0
【Layui】获取下拉框的值
【Layui】获取下拉框的值
654 0
【Layui】获取下拉框的值
layui表单select框同时支持下拉和输入的解决方案
layui表单select框同时支持下拉和输入的解决方案
347 0
layui动态上传按钮点击无效
layui动态上传按钮点击无效
284 0
Layui 弹层组件 - 基础参数2
Layui 弹层组件 - 基础参数2
62 0
|
JavaScript
Layui 弹层组件 - 基础参数4
Layui 弹层组件 - 基础参数4
72 0
|
JavaScript 索引
Layui 弹层组件 - 基础参数5
Layui 弹层组件 - 基础参数5
185 0