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

左眼看成爱

已于 2022-11-09 22:20:35 修改

阅读量1w

点赞数 4

分类专栏： Java JavaScript 文章标签： htm 必填星号自动

于 2020-11-09 02:40:37 首次发布

本文链接：https://blog.csdn.net/wh445306/article/details/109568236

版权

Java 同时被 2 个专栏收录

149 篇文章

订阅专栏

JavaScript

35 篇文章

订阅专栏

一般的打星号写法：

<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>

效果：