首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

要求表单被触摸且无效的角度反应形式的css样式

要实现要求表单被触摸且无效的角度反应形式的CSS样式,可以使用CSS伪类选择器:invalid:focus来定义样式。具体实现方法如下:

代码语言:txt
复制
input[type="text"]:invalid,
textarea:invalid {
  border: 2px solid red;
}

input[type="text"]:focus:invalid,
textarea:focus:invalid {
  outline: none;
  box-shadow: 0 0 5px red;
}

上述代码中,input[type="text"]:invalid选择器表示匹配所有<input>标签中type属性为"text"的无效表单元素,textarea:invalid选择器表示匹配所有无效的<textarea>标签。将这些表单元素的边框颜色设置为红色,表示无效状态。

另外,input[type="text"]:focus:invalidtextarea:focus:invalid选择器表示匹配所有被点击且无效的表单元素,当这些表单元素被点击时,将其边框设置为红色的阴影效果。

通过以上样式定义,可以实现要求的表单在被触摸且无效时的角度反应形式。

注意:腾讯云没有直接相关的产品和链接地址,因此没有推荐相关产品的要求。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

超链接lvha原则

换个角度看,想要为文档某部分内容指定样式,那么先要(通过选择器)选中这部分内容,此时会遇到两种情况: 目标内容恰好被某个标签包起来了,对这整个标签设置样式就能达到目的 目标内容前后没有标签圈定范围,无法直接设置样式...,让层叠结果符合样式编写者预期。...建议遵循lvfha顺序是考虑层叠规则,否则可能会被覆盖,导致同名规则无效。...(小技巧:鼠标划过时同时显示上划线和下划线)永远不会生效,因为text-decoration属性总会被下面两条之一覆盖掉 当然,前提条件是样式规则存在冲突(同名属性来源、重要性、特殊性都相同)时,根据声明顺序来解决冲突...换句话说,如果不存在样式冲突,声明顺序并不重要 也就是说,通过其他方式避免样式冲突发生,就不用遵守lvfha顺序了,例如通过组合伪类来把状态展开: /* 不要求顺序 */ :link :visited

3.5K30

开源跨平台移动项目Ngui【CSS样式规则及用法】

样式规则及用法】 Ngui API 文档 CSS样式到底是什么 CSS样式全称叫Cascading Style Sheets是一种用来表现HTML文件样式语言,是Web前端开发中一定会用到排版语言...CSS样式运行时 这里说是新式到底是什么时间应用到视图上样式并不会主动去查询View.class,绘图线程在渲染帧画面前会先查询并解决所有需要更新样式class。...CSS样式名称规则 非常抱歉告诉各位,现在样式体系只支持class并不支持id与tagName。还是因为同样原因效率问题,所以我希望尽量简单。...多级名称 样式数据结构其实是个树状结构,每个具名样式都可以有子样式,子级样式以空格区分级数没有限制但理论来说越多级数查询速度也会越慢。...当然在触摸屏上没有光标所有hover也不会存在。只有normal、down 对应触摸开始与触摸结束。

91580
  • 移动端click事件300ms延迟

    也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应,而是会等上一小会儿才会出现点击效果。在移动WEB兴起初期,用户对300ms延迟感觉不明显。...但是,随着用户对交互体验要求越来越高,现今,移动端300ms点击延迟逐渐变得明显而无法忍受。 那么,移动端300ms点击延迟是怎么来呢?...,手指未曾在屏幕上移动(某些浏览器允许移动一个非常小位移值),在这个在这个dom上手指离开屏幕,触摸和离开屏幕之间间隔时间较短(某些浏览器不检测间隔时间,也会触发click)才能触发 上述事件发生顺序...其中有一个和点击延迟直接相关实现 —— 一个名为 touch-actionCSS 属性。根据规范,touch-action 属性决定 “是否触摸操作会触发用户代理默认行为。...由于浏览器会忽略不被支持 CSS 属性,唯一能够检测开发者是否声明了 touch-action: none方法是使用 JavaScript 去请求并解析所有的样式

    2.7K21

    「首席架构师推荐」一系列很棒浏览器端JavaScript库资源

    timesheet.js - 简单HTML5和CSS3时间JavaScript库。...docco是一个快速,肮脏,百行,文化编程风格文档生成器。 styledocco从样式生成文档和样式指南文档。 Ronn制作手册。...MobX - 用于简单,可扩展状态管理TFRP库。 Cycle.js - 一个功能强大反应灵敏JavaScript库,用于更清晰代码。 数据结构 数据结构库构建更复杂应用程序。...swipebox - 可触摸jQuery灯箱 jBox - jBox是一个功能强大灵活jQuery插件,可以处理所有弹出窗口,工具提示,通知等。...Bootstrap - 对流行Bootstrap框架扩展,用于创建适合您站点样式,而无需额外标记。 floatThead - (jQuery插件)在正文中滚动时锁定任何标题。

    6.6K21

    开源跨平台移动项目Ngui【CSS样式规则及用法】

    样式规则及用法】 Ngui API 文档 CSS样式到底是什么 CSS样式全称叫Cascading Style Sheets是一种用来表现HTML文件样式语言,是Web前端开发中一定会用到排版语言...CSS样式运行时 这里说是新式到底是什么时间应用到视图上样式并不会主动去查询View.class,绘图线程在渲染帧画面前会先查询并解决所有需要更新样式class。...CSS样式名称规则 非常抱歉告诉各位,现在样式体系只支持class并不支持id与tagName。还是因为同样原因效率问题,所以我希望尽量简单。...多级名称 样式数据结构其实是个树状结构,每个具名样式都可以有子样式,子级样式以空格区分级数没有限制但理论来说越多级数查询速度也会越慢。...当然在触摸屏上没有光标所有hover也不会存在。只有normal、down 对应触摸开始与触摸结束。

    40920

    「沙里淘金」精选浏览器端JavaScript库资源推荐

    timesheet.js - 简单HTML5和CSS3时间JavaScript库。...docco是一个快速,肮脏,百行,文化编程风格文档生成器。 styledocco从样式生成文档和样式指南文档。 Ronn制作手册。...MobX - 用于简单,可扩展状态管理TFRP库。 Cycle.js - 一个功能强大反应灵敏JavaScript库,用于更清晰代码。 数据结构 数据结构库构建更复杂应用程序。...swipebox - 可触摸jQuery灯箱 jBox - jBox是一个功能强大灵活jQuery插件,可以处理所有弹出窗口,工具提示,通知等。...Bootstrap - 对流行Bootstrap框架扩展,用于创建适合您站点样式,而无需额外标记。 floatThead - (jQuery插件)在正文中滚动时锁定任何标题。

    5.9K20

    逻辑组合伪类 :not() :is :where :has

    告别重置 :not伪类最大作用就是可以优化我们过去重置CSS样式策略,使我们代码更加简介,易于理解,例如: .panel{ display: none; } .panel .active...样式场景,第一反应就是使用:not伪类。...用法 :is() 将选择器列表作为参数,并选择该列表中任意一个选择器可以选择元素。这对于以更紧凑形式编写大型选择器非常有用。...在 CSS 中使用选择器列表时,如果任何选择器无效,则整个列表被视为无效,即如果某个选择器无法解析,则被视为无效,不正确或不受支持选择器将被忽略,其他选择器将被使用。...早前这并没有被浏览器所支持,最近查看MDN发现很多浏览器已经支持了~(:has() - CSS(层叠样式) | MDN)

    11810

    SAO-UI-PLAN-Controlldot

    左右浮动切换上下篇算是唯一亮点了。上下按钮用拖动方式体感上还不如直接用侧栏菜单按钮功能来方便。尤其是考虑到PC端,手机端,窄屏设备,触屏电脑等设备动作监测判断。总是牵扯到一大堆交集。...魔改步骤 SAO UI PLAN 相关项目为本站原创项目,因此均为内测版,在样式适配上仅针对本站进行调整,因此在泛用性上存在缺漏。对于可能遇到 bug,欢迎在评论区进行讨论。...touchStartPos; //start信息 let mouseDown = false; //mousemove事件绑定在window上,mouseDown变量判断当前是否为悬浮菜单被按下...SAONotify("Alert","无效操作"); //弹窗提示无效操作 } // 按钮复位 document.getElementById('SAO-ctrldot').getElementsByClassName...SAO-controlldot.pug //- 悬停菜单主体 #SAO-ctrldot .SAO-ctrldot-bg .SAO-ctrldot-dot 新建[Blogroot]\themes\butterfly\source\css

    87820

    Web 框架替代方案

    上周,我们从框架试图解决哪些核心问题角度出发,考察了使用框架不同好处和代价,重点放在声明性编程、数据绑定、反应性、列表和条件。今天,我们来看看能否在 Web 平台上找到替代方案。...结合表单和反应性 通过结合表单高性能选择器稳定性和 CSS 反应性,我们可以实现更复杂 UI 逻辑: <input name="showErrors...表单带有内置<em>的</em>输入验证特性:通过 regex 模式进行验证,对 <em>CSS</em> 中<em>无效</em>和有效表单进行<em>反应</em>性验证,处理必需表单和可选表单,等等。为了享受这些特性,你不需要看起来像表单<em>的</em>东西。...与 <em>CSS</em> <em>的</em><em>反应</em>性 完整<em>的</em> <em>CSS</em> 文件可以供你查看。 <em>CSS</em> 处理了规范中<em>的</em>很多<em>要求</em>(做了一些有利于无障碍<em>的</em>修正)。我们来看看一些示例。 根据规范,“X”(destroy)按钮只在悬停时显示。...它启动了一个连锁<em>反应</em>,使事情变得简单。 如果可以的话,依靠 <em>CSS</em> <em>的</em><em>反应</em>性而不是 JavaScript。 使用表单元素作为表示互动数据<em>的</em>主要方式。

    2.6K10

    原生js实现简单移动端轮播图

    /是否滑动过 var time = 0; //刚刚触摸屏幕事件 touchstart触发事件 dom.addEventListener('touchstart',function...改变当前样式 当前图片索引 * 3.手指滑动时候让轮播图滑动 touch事件 记录坐标轴改变 改变轮播图定位(位移css3) * 4.当滑动距离不超过一定距离时候...需要吸附回去 过渡形式去做 * 5.当滑动超过了一定距离 需要 跳到 下一张或者上一张 (滑动方向) 一定距离(屏幕三分之一) * */ var imageCount...(位移css3) 当滑动距离不超过一定距离时候 需要吸附回去 过渡形式去做 当滑动超过了一定距离 需要 跳到 下一张或者上一张 (滑动方向) 一定距离(屏幕三分之一...) */ //touch事件 var startX = 0; //记录起始 刚刚触摸位置 x坐标 var moveX = 0; //滑动时候x位置

    20.6K60

    Belinda小程序踩坑记(一)

    小程序页面由四个文件组成,分别是 1、.js文件 页面逻辑 2、.wxml 视图层文件,页面结构 3、.wxss 样式文件,页面样式 4、.json 文件,配置文件,页面配置 小程序配置 小程序主体由三个文件组成...小程序页面由四个文件组成,分别是 1、.js文件 页面逻辑 2、.wxml 视图层文件,页面结构 3、.wxss 样式文件,页面样式 4、.json 文件,配置文件,页面配置 小程序视图 在小程序中...1、view 是视图容器,类似于 html 中 div ,但是不同是,用 view 包裹内容,在超出设备窗口时候,它实现效果如 css 样式设置 overflow:hidden 2、如果你需要实现类似通讯录或则聊天列表滚动效果...,你需要使用 scroll-view 滚动容器组件,它实现效果如 css 样式设置 overflow:scroll 。...手指触摸动作结束 5、tap 手指触摸后马上离开 6、longtap 手指触摸后,超过350ms再离开 组件样式 定义在 app.wxss 中样式为全局样式,作用于每一个页面。

    1.3K70

    JavaScript资源大全中文版(Awesome最新版)

    Timeline 时间线 TimelineJS - 一个内置JavaScript讲故事时间。 timesheet.js - 简单HTML5和CSS3时间JavaScript库。...dexy 是一种免费形式识字文档工具,用于编写包含代码任何类型技术文档。 docco 是一个快速而肮脏百行长文字编程式文档生成器。 styledocco 从您样式生成文档和样式指南文档。...slidesJs -是适用于JQuery(1.7.1+)幻灯片插件插件,具有触摸CSS3转换等功能 FlexSlider - 一个真棒,完全响应jQuery滑块插件。...toolbar -一个工具提示样式工具栏jQuery插件 hint.css - CSS一个工具提示库,用于您可爱网站。...swipebox - 一个可触摸jQuery灯箱 jBox - jBox是一个功能强大灵活jQuery插件,可以照顾所有的弹出窗口,工具提示,通知等等。

    15.2K112

    js播放音频文件总结

    总结如下: Audio Player 特点: (1)必须是轻量级、可定制、正确。 (2)必须能解决当前问题,比如响应式、支持触摸操作。 (3)必须解决了我目前没解决问题。...[audio-player-responsive-and-touch-friendly-1.jpg] 这个是jQuery插件形式实现,具有:响应式、 可触摸操作、自适应、 原生、 实用特点...,并且是没有图片元素,完全采用css3来绘制完成,样式也很赞。...特点: 简单:几分钟就可以上手编码、部署 可定制:可以方便地用HTML和CSS换肤 轻量:压缩mini版只有12K 免费开源:没有任何许可限制 社区支持:不断增长活跃社区 插件丰富:主流平台上越来越多免费插件...我感觉这个比较符合我要求,但是他样式实现没有Audio Player 那么优雅,但是可以支持自定义theme,我决定把Audio Player 样式用于jplayer。

    9.1K40

    前端成神之路-WebAPIs07

    常见触屏事件如下: ? 1.1.2 触摸事件对象(TouchEvent) TouchEvent 是一类描述手指在触摸平面(触摸屏、触摸板等)状态变化事件。...1.2.3 classList 属性 classList属性是HTML5新增一个属性,返回元素类名。但是ie10以上版本支持。 该属性用于在元素中添加,移除及切换 CSS 类。...什么是插件 移动端要求是快速开发,所以我们经常会借助于一些插件来帮我完成操作,那么什么是插件呢? JS 插件是 js 文件,它遵循一定规范编写,方便程序展示效果,拥有特定功能方便调用。...插件使用总结 1.确认插件实现功能 2.去官网查看使用说明 3.下载插件 4.打开demo实例文件,查看需要引入相关文件,并且引入 5.复制demo实例文件中结构html,样式css以及js代码...但是外观样式,还有暂停,播放,全屏等功能我们只能自己写代码解决。 这个时候我们可以使用插件方式来制作。 我们可以通过 JS 修改元素大小、颜色、位置等样式。 1.6.

    3.6K10

    JS相关概念

    1、CSS和JS在网页中放置顺序是怎样? (1)CSS 对于谷歌浏览器和Safari放在head里或body里都一样。因为它是在全部样式完全加载下来之后才开始渲染页面,将内容呈现在页面上。...有的是先对HTML元素进行展示,然后等待CSS加载完成之后重新对样式进行修改(FOUC无样式内容闪烁) Firefox、Opere在加载样式时候是边加载边渲染。...而IE、Chrome、Safari则是在全部样式完全加载下来之后才开始渲染页面样式将内容呈现在页面上,没下载完之前页面是空白。...,如果样式加载时间较长,或者加载错误,将会导致页面一直处于空白状态或者无样式状态。...defer 是最接近我们对于应用脚本加载和执行要求 关于 defer,此图未尽之处在于它是按照加载顺序执行脚本

    1.6K20

    掌握这些CSS知识点,Coding如飞!

    ,从表象到原理角度却思考学习,才能熟练掌握技能。...整理了一些在CSS(层叠样式)中知识点,或许你曾看过一些什么“万字总结”、“面试必看”,但还是希望更多同学能够沉下心来学习,不仅仅满足于停留在“API工程师”层面,多从CSS约定规则去解释现象。...1.2 height:100%无效 我们有时会在CSS里写height: 100%,发现并无效果,如下: * { padding: 0; margin...七、CSS选择器 7.1 通用选择器 .a.b:(无空格)当a和b在同一标签类名中同时出现才选择 .a .b:(有空格)选择a所有后代b .a>.b:(>)选择a子代b .a, .b:(,)a与b样式相同...CSS知识点,也是工作开发过程中经常会遇到细节问题,把这些知识点/CSS规则熟记于心,有利于高效率编写前端样式

    1K20

    CSS 下拉菜单与 focus

    focus 伪类 focus 伪类 :focus 表示被点击、触摸或 tab 选中元素,笼统地说就是「获得焦点」元素。 当初实现这个需求时候同样考虑过采用 :hover 或者 :active。...hover 算是比较熟悉了,在 PC 上鼠标悬停于此时 :hover 伪类生效,比如 链接 样式正是采用 :hover 实现鼠标经过时反馈,以提示用户这是可点击。...到回头仔细阅览 Spectre CSS 描述,看到这样一句话。 You also need to add tabindex to make the buttons focusable....究竟何为 tabindex,当时并没有深究,只知道加上后确实点击有反应了。当然出问题后又仔细翻了翻这方面的内容,就不按照平时我喜欢讲故事般时间顺序整理,直接放上来。...再说决定聚焦顺序,非负值也分为两部分,0 与正值,若为 0 则该元素可以被键盘 Tab 聚焦或 JavaScript、点击聚焦按照默认顺序聚焦;若为正值则按照数值从小到大顺序聚焦 优先于所有 tabindex

    5.5K20

    【实战技巧】CSS自定义属性以及在VUE3中使用

    CSS变量是浏览器中直接可用CSS属性,而预处理中变量是用于编译成常规CSS代码,浏览器其实对它们一无所知。...我们可以在 样式中 ,在 内联样式 中,在 SVG标签 中直接使用CSS变量,甚至可以在 运行时 用JavaScript直接修改它。但是我们是 无法 对预处理器中变量做上面这些操作....当然,可以同时使用CSS变量和预处理变量,他们是不冲突. CSS变量:语法 变量声明 css变量定义由--开头,这样浏览器能够区分 自定义属性 和 原生属性 ,从而将它俩分开处理。...假如只是定义了一个自定义元素和它属性值,浏览器是不会做出反应。如下面的代码, .foo 字体颜色由color决定,但--theme-color对.foo没有作用。...); // '#7F583F' // 删除变量 document.body.style.removeProperty('--primary'); 这意味着,JavaScript 可以将 任意值 存入样式

    2.7K20

    前端学习笔记之CSS介绍

    阅读目录 一 什么是CSS 二 为何要用CSS 三 如何使用CSS 一 什么是CSS CSS全称Cascading Style Sheet层叠样式,是专用用来为HTML标签添加样式。...样式指的是HTML标签显示效果,比如换行、宽高、颜色等等 层叠属于CSS三大特性之一,我们将在后续内容中介绍 指的是我们可以将样式统一收集起来写在一个地方或者一个CSS文件里 二 为何要用CSS... /*形式一:*/ /*@import "css/mystyle.css";*/ /*形式二:*/...CSS2.1特有的,对于不兼容CSS2.1浏览器来说就是无效 2、导入式缺点: 导入式会在整个网页装载完后再装载CSS文件,因此这就导致了一个问题,如果网页比较大则会儿出现先显示无样式页面,闪烁一下之后...3、链接式优点: 使用链接式时与导入式不同是它会在网页文件主体装载前装载CSS文件,因此显示出来网页从一开始就是带样式效果,它不会象导入式那样先显示无样式网页,然后再显示有样式网页,这是链接式优点

    64720
    领券