zoukankan      html  css  js  c++  java
  • layuimini如何在输入框前面加红心,表示它为必填项

    一、未修改前

    1.  原代码:

    <form class="layui-form" action="">
    <div class="layui-form-item">
    <label class="layui-form-label">单行输入框</label>
    <div class="layui-input-block">
    <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
    </div>
    </div>
    <div class="layui-form-item">
    <label class="layui-form-label">验证必填项</label>
    <div class="layui-input-block">
    <input type="text" name="username" lay-verify="required" lay-reqtext="用户名是必填项,岂能为空?" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
    </div>
    2. 原效果

     二、进行修改

    1. 在form标签里的class加上layuimini-form

    2. 在label标签里的class加上required

    3. 修改后的代码如下:

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>表单集合演示</legend>
    </fieldset>

    <form class="layui-form layuimini-form" action="">
    <div class="layui-form-item">
    <label class="layui-form-label required">单行输入框</label>
    <div class="layui-input-block">
    <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
    </div>
    </div>
    <div class="layui-form-item">
    <label class="layui-form-label required">验证必填项</label>
    <div class="layui-input-block">
    <input type="text" name="username" lay-verify="required" lay-reqtext="用户名是必填项,岂能为空?" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
    </div
    4. 修改后效果:
     


    软件下载提取码:qwer
  • 相关阅读:
    mybatis plus foreach 的用法
    mongodb聚合查询
    mongodb and 和 or 查询
    mongodb全文搜索
    时间参数的传递
    rabbitmq
    AOP各种的实现
    OWASP Top 10十大风险 – 10个最重大的Web应用风险与攻防
    OAuth2.0认证和授权机制讲解
    MySQL主从复制
  • 原文地址:https://www.cnblogs.com/ty0910/p/14166551.html
Copyright © 2011-2022 走看看