input 不显示边框_不需要使用JavaScript
点击右上方红色按钮关注“小郑搞码事”,每天都能学到知识,搞懂一个问题!
谢谢你点开来阅读,小郑希望您阅读完有所获。
先解释一下标题的歧义,之所以叫不需要使用JavaScript的意思不是让你放弃它,更不是说有个横空出世的脚本可以替换它。说的是前端在处理交互的时候,好多场景是可以不用JavaScript干预的。而直接借助标签特性,CSS属性特点,选择器灵活应用就能很好的完成一个你所需要的交互效果。这里会用实例的方式,详细的给大家讲一些交互是如何弃JavaScript而实现的。希望大家从中有所获。
先来复习一下几个长的相似的选择器。这些选择器不是每天都会用,可能一个星期甚至几个月才会用一次,如此,容易忽略或者易混淆它们的作用。所以借此机会来一起复习一下,因为本文讲解的实例中也会用到。
如上图所示:
1. 逗号指的是相同的CSS样式,class值为a的对象和class值为b的对象所使用的样式值是完全一样的。
2. 空格指的是后代元素,定义class值为a的对象的所有后代元素中class值为b的对象的样式值。
3. 大于号叫子选择器,作用于第一代子元素而不是所有,与空格选择器区分开来。
4. 加号是相邻兄弟选择器,只作用于后出现的相邻元素,如上,紧接着class值为a的对象出现的class值为b的对象。
4. 破浪号定义class值为a的元素同级下所有符合class值为b的元素的样式。
选择器复习完了,下面我们来讲解一些实例。
一、传送带效果实现
这种效果经常出现在焦点图区域,点击左右按钮或者点击圆点区域来切换图片。如下图所示:
如果你认为这种效果只能借助脚本语言JS来实现的话,那今天你也就能学会不用JS实现的方法。还记得HTML元素中,label标签中的for属性吗?对,没错,传送带效果就是利用label标签的for属性来实现的。
【非JavaScript实现技术】for属性规定label与哪个表单元素绑定。
举个例子:
Male
注意label里的for属性值,和input里的id属性值是对应的,当点击label时,单选项input就被选中状态。进一步我们就可以利用样式选择器来设置选中input的同级元素状态,从而实现我们想要的效果。
来对照传送带效果的源代码,看看具体怎么实现:
这是传送带效果实现的代码,如上图所示,实现原理就是利用设置选中input元素同级元素样式来搞的。需要用的样式选择器有相邻元素选择器+,有同级元素选择器~。对着上面代码图,下面我在具体说一下实现过程。
1. 当用户点击左右箭头(labler标签)时,对应与其for属性相同的id属性的input元素被选中,利用相邻元素选择器,设置其相邻元素class=carousel-item的显示。
2. 利用同级元素选择器~。设置所有同级元素label的class=control-1的UI状态,这样就能实现点击左右箭头时,切换到对应的图片。
二、计算复合选择效果
从标题上不好理解,我们就直接上一张动效图来看看(搞个GIF图)。
就是这样的效果,每当我们点击选择一个选项时,会在下面结果栏中计数加1,一个都不选择时,就不显示结果。
如果你认为这个效果只能借助脚本JavaScript来实现时,那么今天你又学到了一种非脚本实现方式。
还记得我之前写过一篇文章:《使用CSS计数器动态生成且自动递增数字》。里面我讲过三个重要属性,其中就有应用计数器属性(counter-increment)和显示计数(counter)。对此还不是很熟悉的同学可以翻到之前的过一下,非常好理解。
好了,回到计算复合选择效果的实现上,其实现原理就是利用计数器功能。
【非JavaScript实现技术】计数器两个属性counter-increment和counter 。
如果对计数器足够了解的话,这段代码也是非常好理解的。利用counter来统计选中的input元素的个数。对照上面代码具体来分析一下:
1. 首先在选择input元素上应用计数器(counter-increment),在class=result元素上显示计数数值。
2. 默认class=result元素不显示,利用同级选择器~来控制,当有选中的input元素时显示class=result元素。
三、移入和点击翻动效果
类似于翻牌的效果,在动作上有所不同,这里主要强调的是鼠标移入和点击触发时的动效,如下面这张gif图所示:
来看一下,这个效果不用JS是如何实现的。
【非JavaScript实现技术】利用input(checkbox)选中时设置相邻元素的样式。
DOM结果很简单:
Front
Back
如这个结构所示,实现的关键代码就是在checkbox选中之后设置相邻元素class=card的样式值(rotate属性)。细心的同学可能发现了,在鼠标移入时有一个小的转动角度和边框阴影,这个是利用label标签hover时给class=card元素加rotateX(20deg)和box-shadow值。鼠标移入label后,点击input选中后,使用+号选择器设置class=card元素的rotateX值即可实现上面的效果。这个比较简单,不深入说了,总之在不使用JS的情况下也能轻松搞定上面这个交互效果。
四、补充说明效果
这个效果大家一定非常熟悉,鼠标移入的时候展示对应文字说明的浮层,其意义大部分就是进一步说明。同样先来看一下效果演示。
对CSS熟悉的同学应该都知道,CSS有一些函数Function,也都是比较通用的,比如:
attr()函数
calc()函数
linear-gradient()函数
radial-gradient()函数
等等。
补充说明这个效果也无需JS来实现,纯CSS就能搞定。
【非JavaScript实现技术】鼠标hover时,使用attr函数获取属性内容到before的content中。
关键代码:
data-info是放在标签dfn上的一个自定义属性,dfn标签可标记那些特殊术语或短语的定义,关于该标签需要注意的是能不用的时候尽量不要用。总之,关于补充说明的效果,大家清楚了纯CSS是怎么实现的就行了。
五、页卡切换效果
最后要说的是Tab切换效果,其非JS处理原理就是和上面说的传送带效果是一样的,使用label标签的for属性来搞。
对照源代码来讲一下它的基本实现思路。
【非JavaScript实现技术】设置选中的input元素同级内容的样式。
这里在详细说明一下实现原理:当点击label时,其对应的input元素被选中,然后利用同级选择器~让其对应的内容(class=tab_content)显示,同时利用相邻元素选择器+设置其相邻label的显示状态,简单吧。
本文最后总结一下
本文开头部分,我给大家复习了一些选择器的用法,这里在强调三个重要的组件选择器的用法。
>:子选择器(ul > li)。
~:相邻兄弟选择器(ul + p)。
+:通用兄弟选择器(ul ~ p)。
对照这张图,在理解一下就一目了然了。
紧接着讲了五个实例,这里在归纳一下实例中使用到的技术实现思路。
1. label的for属性规定与哪个表单元素(id属性)对应,点击label时,就相当于是选择了其对应的input元素,然后在使用CSS选择器设置其它元素的样式。
2. CSS中计数器的用法,主要学会三个属性的配合使用,counter-reset(建立计数器),counter-increment(应用计数器),counter(显示计数),搞懂可能解决很多交互问题,更多可以参考我之前的文章。
3. 注意CSS里函数的用法。如attr(), calc()等都是比较常用的。
4. 最后可以要说的一个点是伪元素的用法,尤其是after/before。
这些效果你不需要使用JavaScript。以上实例如果需要源代码可以给我发私信哈。
input 不显示边框_不需要使用JavaScript相关推荐
- textarea不显示边框_飞利浦256P1FR显示器评测:QHD分辨率微窄边设计
■本文来源:蜂鸟网 作者:文子林 当前用户在选购显示器的时候,已经不再和前几年一样一味的追求4K分辨率.大尺寸等因素了,更多的人在购买显示器的时候更加看重的是整体的实用性.飞利浦256P1FR是飞利 ...
- 让对话框不显示边框_微信消息“无边框”模式搭配这款壁纸,简直绝了
技能:好运壁纸,微信"无边框"聊天背景图 难度系数:1颗星 适用系统:安卓,iOS(苹果) 今天所长想给大家介绍一组会让人好运爆棚的壁纸,不过,运营妹纸给我分享了一款有趣的聊天背景 ...
- css属性基础以及wxss——居中,渐变色边框,圆角边框,横向布局,重叠div,div固定在底部,input的无边框显示下划线
text-align: center;--子item居中对齐 display: flex;--子item横向布局 -webkit-justify-content: center;--子item居中 m ...
- 点击input时,不显示边框!
点击input时,不显示边框! ① input{ outline: none; } ②:focus 伪类选择器 ① input{ outline: none; } 鼠标点击input时,出显的黑 ...
- python Django 学习笔记 2020-11-6(input不显示提示信息,日历,datetime类型数据的显示,使用装饰器实现登录限制,文字下划线)
1.input不显示提示信息 添加属性autocomplete="off".如: <input type="text" class="input ...
- input去除蓝色边框
input标签在使用的时候会有边框样式.当input聚焦的时候又会显示出一个蓝色边框. 很多时候我们并不需要这种默认样式的边框,就需要去除边框. 给需要去除的标签添加css样式: border: no ...
- (转)基于MVC4+EasyUI的Web开发框架经验总结(1)-利用jQuery Tags Input 插件显示选择记录...
http://www.cnblogs.com/wuhuacong/p/3667703.html 最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开 ...
- word中图片为嵌入式格式时显示不全_打印Word图片显示不全 Word2007图片显示不全解决方法...
打印Word图片显示不全 Word2007图片显示不全解决方法,平凡的世界平凡的你,努力学习使我们变得不平凡,今天要介绍的知识是打印Word图片显示不全的相关知识,你准备好学习打印Word图片显示不全 ...
- excel切片器显示错误_带切片器的Excel弹出选择器工具
excel切片器显示错误 Slicers make it easy to select from a list of items, but they take up valuable space on ...
最新文章
- java 反射详解通俗易懂
- 网页制作中如何自定义网页图标
- 亿彩文件批量下载器 v3.0
- 洛谷——P1311 选择客栈
- c语言程序设计 猜数字,C语言程序设计(猜数字游戏)报告.doc
- 与c++ 进行最简单的进程通信
- python之helloworld
- 宾州州立计算机科学世界排名,美国宾州州立大学排名一览表:世界综排与专业排名详细解析!...
- 开会坐在后面,意思是不感兴趣
- SpringBoot项目进行单元测试
- 如何在 macOS 上安装Axure RP
- LeetCode_69(x 的平方根 )
- 小学计算机课动画制作的评课稿,小学信息技术评课稿
- 如何在python导入包_python如何导入包
- 【网站介绍】有意思的网站(备忘)
- wince车机可以连接电脑吗_WINCE车机平台手机互联使用说明
- 阿里云服务器证书登录如何配置
- Murmur Hash 例子
- 如何使用api调用AI抠图服务
- 注意!2022年下半年pets5正在报考中
热门文章
- 35个不会也要知道的Python小技巧
- python基础教程:global的用法
- python反转列表的三种方式
- python 将文件描述符包装成文件对象
- 设备服务器停止运行吗,服务器已停止响应是怎么回事
- javascript技术教程蔡敏_程序员都必掌握的前端教程之JavaScript基础教程(上)
- c++ 获取文件的hashcode_jsp 实现文件上传和下载
- linux ubuntu kill指令和killall指令的区别(killall会终止所有与该名字匹配的进程)
- 绘制不同光照条件下识别率多项式拟合曲线图(暂未找到最佳拟合曲线)
- YunYang1994/tensorflow-yolov3 IndexError: list index out of range 解决办法