首页 > 其他分享 >css条件选择器has,给layui必填表单的label增加红色星号

css条件选择器has,给layui必填表单的label增加红色星号

时间:2023-05-14 09:56:02浏览次数:40  
标签:reqtext layui required label lay verify div 选择器

使用lay-reqtext而不应lay-verify或者lay-verify="required",是为了防止 lay-verify="required|monolog" 和 lay-verify=“自定义验证规则”(有时候不是必填项,但是填写以后要检查格式)。

.layui-form-label:has(+div input[lay-reqtext]) :has条件选择器,括号里是选择条件,+div 兄弟元素里紧跟着的div,div里含有lay-reqtext属性的input
选择满足后边紧跟着div并且div里有含有lay-reqtext属性的input的layui-form-label
/*补充或覆盖layui样式,加载layuicss的时候加载这个css*/
.layui-form-label:has(+div input[lay-reqtext],+div select[lay-reqtext],+div textarea[lay-reqtext]):after{
   content:"*";
   color: red;
}

 

如果lay-reqtext不是必须的 或者 缺失提示需要根据情况提示的时候,该方法不好。最好是能通过lay-verify选择,只是不知道怎么写能同时选择 lay-verify=“required” 和 lay-verify=“required|...” 这两种情况。 

能不能select[属性 like 值] ??

百度了一番,没想到还真有

[class^='icon'],
  [class*=' icon'] {
    width: 100px;
    height: 100px;
    background-color: red;
  }
[class^='icon'] 含有icon开头的class属性
[class*=' icon']名称里包含有cion的class属性,只是,为什么有空格?这是要选择icon不在class列表第一个的元素

照着修改一下input[lay-verify*='required']

于是
.layui-form-label:has(+div input[lay-verify*='required'],+div select[lay-verify*='required'],+div textarea[lay-verify*='required']):after{
    content:"*";
    color: red;
}

 

同理,单选,多选是不是也可以这样,遇到再说


标签:reqtext,layui,required,label,lay,verify,div,选择器
From: https://www.cnblogs.com/djiz/p/17398789.html

相关文章

  • TinyMCE 6 编辑器+ Layui 2.8.2+单页面
    TinyMCE6编辑器+Layui2.8.2 拓展 tinymce.js目录结构  layui.define(function(exports){vart={};//初始化t.bulid=function(options){if(typeoftinymce=='undefined'){varscript=document.cr......
  • 学习日记——CSS高级选择器
    1.层次选择器①后代选择器EF:选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内②子选择器E>F:选择匹配的F元素,且匹配的F元素是匹配的E元素的子元素③相邻兄弟选择器E+F:选择匹配的F元素,且匹配的F元素紧位于匹配的E元素后面④通用兄弟选择器E~F:选择匹配的F元素,且位于匹配......
  • 基础选择器之标签选择器
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatib......
  • css基本介绍+嵌套使用+选择器+列表样式+绝对定位
    1. 什么是CSS,有什么作用?  01CSS(Cascading Style Sheet):层叠样式表语言。CSS的作用是: 修饰HTML页面,设置HTML页面中的某些元素的样式,让HTML页面更好看。 CSS好比是HTML的化妆品一样。HTML还是主体,CSS依赖HTML。CSS的存在就是修饰HTML,所以新建的文件还是xx.html文件。2、CSS......
  • CSS、JS、jQuery中选择器总结
    CSS、JS、jQuery中选择器总结CSS中选择器:1.元素选择器:根据标签名来选中指定元素语法:标签名{}2.将被指定的元素设为不同样式ID选择器,根据元素的ID属性值选中一个元素语法:#ID属性值{}设置了重复的ID也可设置同样的效果3.class标签属性;每个标签都有和ID类似但其可以重复使用......
  • layui表单验证抽离成单独模块手动调用
    模块名:validateForm可以多个表单一起验证,任何任何一个验证不通过就会返回。使用:varboolResult=validateForm.validate("formId1","formId2",....)模块定义如下:1/**2扩展一个表单手动验证模块3**/45layui.define(['layer','form'],function(expo......
  • layui内置loading等待加载
    点击功能按钮之后:varloading=layer.load(2,{shade:false,time:3*1000});//参数:icon:0,1,2loading风格//shade:false是否有遮罩,true表示有遮罩//time:3*1000设定最长等待时间,设置时间之后,loading会在时间到之后自动关闭关......
  • layUI的富文本编辑器赋值问题
    layUI中富文本编辑器的特点先获取div的id,然后再给div上面的文本赋值,然后调用富文本编辑器特有的组件,进一步给它赋值,就可以实现了varele=document.getElementById("msg-input");//获取文本域的idconsole.log(e.target.responseText);ele.value=ele.value+e.target.respo......
  • Layui+dtree实现左边分类列表,右边数据列表
    效果如下代码实现<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>帖子类别</title><metaname="renderer"content="webkit"><metahttp-equiv="X-UA-Compatible&q......
  • ubuntu apt 安装报错:Media change: please insert the disc labeled 'Ubuntu 20.04.5
    前言如果你在Ubuntu上使用apt安装软件包时遇到"Mediachange:pleaseinsertthedisclabeled..."的错误消息,这通常是因为apt源列表中包含CD/DVD源,但你的系统中没有插入相应的安装介质(CD或DVD)。解决检查/etc/apt/sources.list文件中,是否出现CD/DVD源。类似d......