首页 > 其他分享 >输入范围 CSS 选择器

输入范围 CSS 选择器

时间:2022-08-30 17:45:18浏览次数:86  
标签:本文 range CSS 选择器 输入 范围

输入范围 CSS 选择器

在本文中,我们将学习一个大多数开发人员都不知道的 CSS 选择器

输入范围的 CSS 选择器

这里的输入范围是指一个普通的html输入字段,属性type=number,即 <input type="number">

这允许用户将用户输入限制为仅数字,并允许设置要在输入中输入的数字的最小值和最大值,如下所示

<input type="number" min="2" max="5">

让我们添加一些风格

 输入:范围内{  
 颜色:绿色;  
 }  
  
 输入:超出范围{  
 红色;  
 }

如果用户在 2-5 范围内输入值,上面的代码是不言自明的,如果他超出 max-min 范围,则颜色将为红色

Inramge

outrange

到这里就完成了in-range和out-of-range css选择器的使用,

希望你喜欢,表达一些爱

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明

本文链接:https://www.qanswer.top/1802/38133017

标签:本文,range,CSS,选择器,输入,范围
From: https://www.cnblogs.com/amboke/p/16640231.html

相关文章

  • CSS 伪类:
    CSS伪类:伪类用于定义元素的特殊状态。例如,它可以用于:当用户将鼠标悬停在元素上时设置元素的样式。样式访问和未访问的链接不同。当元素获得焦点时为其设置样式。......
  • 学习 Tailwind CSS 的先决条件
    学习TailwindCSS的先决条件在本文中,我们将介绍您在开始之前需要了解的最低CSS知识顺风CSS.我假设你已经知道HTML基础.但如果你不这样做,我已经写了一个博客系列......
  • CSS 基础 - 结构
    CSS基础-结构记得我在我的文章中提到的HTML基础-结构最高级的结构将由CSS处理的文章?嗯,就是这样。Photoby设计公司on不飞溅正如我之前提到的,HTML的't......
  • 如何使用CSS伪类选择器
    总览CSS选择器允许你通过类型、属性、位于HTML文档中的位置来选择元素。本教程阐述了三个新选项:is()、:where()和:has()。选择器通常在样式表中使用。下面的示例会找......
  • css——复选框汉字不对齐
    1.复选框汉字不对齐<inputtype="checkbox"v-model="isAll"/><span>全选</span>2.input、span加上vertical-align:middle;属性input{vertical-alig......
  • 推荐几个不错的 CSS 工具,持续收录!
    原文链接:推荐几个不错的CSS工具,持续收录!NeumorphismNeumorphism是一个很棒的工具,可以根据你的喜好选择颜色、编辑大小、半径、距离等为你的设计生成UICSS代码......
  • css盒子 box-sizing 设置
    content-box默认值。如果你设置一个元素的宽为100px,那么这个元素的内容区会有100px宽,并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。border-box......
  • CSS选择器优先级顺序
    css的选择器有很多种,那么,自然而然的就会有优先级这一概念出现,所以,css选择器优先级顺序是怎样的呢?本篇文章将来给大家介绍css选择器优先级的排序,话不多说,我们来直接看正文......
  • 简单的Css动画--闪烁的文字效果
    <!DOCTYPEhtml><htmllang="en"><head>  <metacharset="UTF-8">  <metahttp-equiv="X-UA-Compatible"content="IE=edge">  <metaname="viewport"c......
  • tp+javascript 输入框/绑定邮箱
    添加数据库and绑定邮箱!!! 实现效果:  数据库设计:CREATETABLE`o_my_resume`(`id`int(11)NOTNULLAUTO_INCREMENT,`name`varchar(255)NOTNULLCOMM......