packageList" :key="item.id" :label="item.name" :value="item"> 注意事项： 1.如上代码value绑定的是...item的对象; 2.首先在el-option中添加:key="item.id"的属性; 3.然后在el-select 添加value-key="id"属性，注意value-key前面没有: 4.注意value-key...的值与key绑定的属性值对应。...http://element-cn.eleme.io/#/zh-CN/component/select 在这个链接demo底下，Attributes上面就有这么一条标注，很明显 如果 Select 的绑定值为对象类型...，请务必指定 value-key 作为它的唯一性标识。
另外值得注意的是，当通过键盘的Tab键让单选框获得焦点后，再按下Space键则会选中该单选框。 有了上述的了解，我们可以开始着手撸代码了！ 少废话，撸代码 ?...上图中左侧就是原生单选框，右侧为我们自定义的单选框。从上到下依次为未选中、选中、获得焦点和disabled状态的样式。...但由于label控件自身的限制，如默认不是可获得焦点元素，因此无法传递键盘按键事件到单选框，即使添加tabindex特性也需手写JS来实现； 当tabindex大于等于0时表示该元素可以获得焦点，为0时表示根据元素所在位置安排获得焦点的顺序...当自定义单选框内元素采用inline-block时，若vertical-align设置稍有不慎就会导致内部元素所在的line box被撑高，从而导致自定义单选框所在的line box高度变大。...因此这里采用将内部元素的display均设置为block的做法，直接让vertical-align失效，提高可控性。
02 原理 主要是借助radio单选框，梳理如下： 去找个好看的iconfont； 借用5个radio单选框，把默认样式都去掉，显示默认的星星； 用checked伪类监听用户选中✅，由默认的星星变成高亮的星星...； 然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮； 把5个radio单选框反向排列❗； 03 代码 这是我事先生成好的iconfont： 一个很简洁的布局： 先把默认的星星显示出来： // 去掉默认样式...input{ -webkit-appearance: none;border: none;outline: none;cursor: pointer;}.rate-content{$main:#ffa822...04 总结 核心代码其实就是这两段，其他都是可选的 元素反向排列： display: flex;flex-flow: row-reverse; 兄弟元素操作： input:checked ~input...内边距的作用是保持元素连贯性以及扩大点击范围
01 效果图 02 原理 主要是借助radio单选框，梳理如下： 去找个好看的iconfont； 借用5个radio单选框，把默认样式都去掉，显示默认的星星； 用checked伪类监听用户选中✅，由默认的星星变成高亮的星星...； 然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮?...； 把5个radio单选框反向排列❗； 03 代码 这是我事先生成好的iconfont： <link rel="stylesheet" href="//at.alicdn.com/t/font_1356455...： // 去掉默认样式 input { -webkit-appearance: <em>none</em>; border: <em>none</em>; outline: <em>none</em>; cursor: pointer; }...<em>元素</em>反向排列： <em>display</em>: flex; flex-flow: row-reverse; 兄弟<em>元素</em>操作： input:checked ~ input 如果不用flex反向排列，还可以用rotateZ
01 效果图 02 原理 主要是借助radio单选框，梳理如下： 去找个好看的iconfont； 借用5个radio单选框，把默认样式都去掉，显示默认的星星； 用checked伪类监听用户选中✅，由默认的星星变成高亮的星星...； 然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮?...： // 去掉默认样式 input { -webkit-appearance: none; border: none; outline: none; cursor: pointer; }...元素反向排列： display: flex; flex-flow: row-reverse; 兄弟元素操作： input:checked ~ input 如果不用flex反向排列，还可以用rotateZ...内边距的作用是保持元素连贯性以及扩大点击范围?
label 元素不会向用户呈现任何特殊效果，标签的作用是为鼠标用户改进了可用性，当用户点击标签中的内容时，浏览器就会自动将焦点转到和该标签相关联的控件上；标签在单选按钮和复选按钮上经常被使用...，使用该标签后，你点击label标签内的内容，也可以选中对应的单选按钮或复选按钮。...form，form属性是用来规定所属的一个或多个表单的 id 列表，以空格隔开；当标签不在表单标签中时，就需要使用form属性来指定所属表单； 元素没有特别的样式考虑...元素不浮动，并会显示在其在文本中出现的位置。 inherit 规定应该从父元素继承 float 属性的值。 元素怎样浮动: 元素在水平方向浮动，即元素只能左右移动而不能上下移动。...注意： 绝对定位的元素忽略float属性！ 2.3 CSS3 :checked 选择器 :checked 选择器匹配每个选中的输入元素（仅适用于单选按钮或复选框）。
实现选中单个星星 实现连同兄弟元素一起高亮 然后把input反向排列 鼠标移入预览选中效果 加入放大动画 总结 获取代码 ---- 原理 梳理如下： 去找个好看的iconfont，[Iconfont...-阿里巴巴矢量图标库]、； 借用5个radio单选框，把默认样式都去掉，显示默认的星星； 用checked伪类监听用户选中✅，由默认的星星变成高亮的星星； 然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮...); } 效果如下： 实现连同兄弟元素一起高亮 /* 实现选中单个星星 */ /* 高亮的星星 */ input[name="rate"]:checked::after, input[name="rate...效果如下： 然后把input反向排列 .rate-content { display: flex; flex-flow: row-reverse; } 效果如下： 鼠标移入预览选中效果 input...元素反向排列： display: flex; flex-flow: row-reverse; 兄弟元素操作： input:checked ~ input 获取代码 https://coding.zhangbing.site
用css实现一个rate评分 ❗ 核心代码也就三行，效果如下： 目录 原理 代码 基本布局 先把默认的星星显示出来 实现选中单个星星 实现连同兄弟元素一起高亮 然后把input反向排列 鼠标移入预览选中效果...加入放大动画 总结 获取代码 原理 梳理如下： 去找个好看的iconfont，[Iconfont-阿里巴巴矢量图标库]、； 借用5个radio单选框，把默认样式都去掉，显示默认的星星； 用checked...伪类监听用户选中✅，由默认的星星变成高亮的星星； 然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮； 把5个radio单选框反向排列 ❗； 代码 基本布局 这是我事先生成好的iconfont <link...); } 效果如下： 实现连同兄弟元素一起高亮 /* 实现选中单个星星 */ /* 高亮的星星 */ input[name="rate"]:checked::after, input[name="rate...元素反向排列： display: flex; flex-flow: row-reverse; 兄弟元素操作： input:checked ~ input 获取代码 https://coding.zhangbing.site
这里运用的是：checked 伪类选择器，其意思就是“如果选中了表单（复选框、单选按钮），则应用相关样式规则” 我们通常隐藏表单控件，然后结合标签来控制复选框或单选框的选择，制作一些特殊的效果...如果您在 label 元素内点击文本，就会触发此对应的表单控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。这就是这个案例的关键所在，让我们能在选项卡直接进行切换。...同时为了让用户区分选中了哪个选项卡，我们需要定义处理选项卡处于选中状态时对应的标题颜色。...最后定义一个可选的外观样式（非必须样式，可选），当每个单选按钮获取焦点时，我们为lable标签定义outline属性，这个细节帮助我们增强组件的可访问性。...幸亏我们使用了弹性盒子布局，在这种情况下，我们让手风琴垂直显示，也就是每个选项卡纵向分布（列布局），每个选项卡的标题内容横向分布（行布局），示意图效果如下： ? 对应的代码如何实现呢？
HTML5 的 form 如何关闭自动完成功能？ 将不想要自动完成的 form 或 input 设置为 autocomplete=off 6. 什么是BFC？...标签上title 与 alt 属性的区别是什么? Alt 当图片不显示时，用文字代表。Title为该属性提供信息 8. 改变元素的外边距用什么属性？改变元素的内填充用什么属性？...11. display：none；与 visibility： hidden 的区别是什么？...display：none； 使用该属性后，HTML 元素（对象）的宽度、高度等各种属性值都将“丢失”； visibility：hidden； 使用该属性后，HTML 元素（对象）仅仅是在视觉上看不见（...:checked 单选框或复选框被选中。 14.
:target 是 CSS3 新增的一个伪类，可用于选取当前活动的目标元素。当 URL 末尾带有锚名称 #，就可以指向文档内某个具体的元素。...{ } 这条 CSS 规则，#content1 元素由 display:none 变成display:block ，点击列表2亦是如此。....nav1:checked ~ .nav li { // 进行样式操作 } 同样用到了兄弟选择符 ~ 这样，当接收到表单元素的点击事件时，可以通过兄弟选择符 ~ 操作它的兄弟元素的样式。...这样改造之后，当我们点击 元素的时候，相当于点击了 这个单选框表单元素，而这个表单元素被点击选中的时候，又可以被...这个时候，我们就可以将页面上的表单元素隐藏，做到点击 相当于点击表单： input{ display:none; } 这样，应用到本题目，我们应该建立如下 DOM 结构： <div class
： 而很多人的思维还停留在web2.0时代，用各种库来做UI，导致网页臃肿。...首先这些单选按钮组的父元素用，因为可以监听按钮组的变化，同时还能通过name属性直接得到RadioNodeList列表和变化值，非常方便，不用设置其他的css选择器了。...属性要一致，然后通过form[name]得到单选组，form[name].value就是当前选中的按钮的value，也就是折叠按钮的标题，每个后面跟着一个就是菜单展开的内容。...只有被选中的后面的才显示。...input[type="radio"] + div { display: none; } input[type="radio"]:checked + div { display
w=470&h=87&f=gif&s=158074] 原理 梳理如下： 去找个好看的iconfont，Iconfont-阿里巴巴矢量图标库； 借用5个radio单选框，把默认样式都去掉，显示默认的星星；...用checked伪类监听用户选中✅，由默认的星星变成高亮的星星； 然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮； 把5个radio单选框反向排列 ❗； 代码 这是我事先生成好的iconfont...： // 去掉默认样式 input { -webkit-appearance: none; border: none; outline: none; cursor: pointer; }...字体 font-size: 30px; padding-right: 10px; // 默认显示的星星 &::after { content: "\...w=470&h=87&f=gif&s=171831] 总结 核心代码其实就是这两段，其他都是可选的 元素反向排列： display: flex; flex-flow: row-reverse; 兄弟元素操作
label的作用：for属性可以绑定一个input，然后点击label的文字即相当于选中 需要注意的是：for属性的值只能是要关联表单元素的id值 2、设置单选按钮 单选按钮用 <input type...常见的属性 value：指定下拉菜单选项的value值 type：指定下拉菜单的类型是单选还是多选 text：指定下拉菜单选项的文本值 select：声明是否被选中 options：选项数组...= 'none'; target.className = 'add' } break; case 'INPUT'://点击checkbox，父亲元素选中，则孩子节点中的...checkbox.length;i++) checkbox[i].checked = false; } } parcheck(target,sibcheck(target));//当孩子结点取消选中的时候调用该方法递归其父节点的...checkbox逐一取消选中 break; } }); window.onload = function(){//页面加载时给有孩子结点的元素动态添加图标 var labels =
onclick="show()">jQuery操作 <img src="https://img-blog.csdnimg.cn...jQuery<em>的</em>操作按钮，<em>当</em>点击jQuery按钮后会<em>显示</em>图片。 ...Onmouseout事件是指将光标从<em>元素</em>上离开<em>时</em>产生<em>的</em>事件。...class 属性用于<em>为</em>多个 HTML <em>元素</em>设置特定样式。 注意：不要使用数字开头<em>的</em> class 属性！在某些浏览器中可能出问题。...:submit 获取符合 [type=submit] <em>的</em> <em>元素</em> <em>元素</em>集合 :checked 选取被<em>选中</em><em>的</em> <em>元素</em> <em>元素</em>集合 :selected 选取被<em>选中</em><em>的</em> <option
radio：单选框，表示一组互斥选项按钮中的一个。当一个按钮被选中，之前选中的按钮就变为非选中的 。 submit：提交按钮。提交按钮会把表单数据发送到服务器。...submit和reset为按钮显示数据 size：大小 checked属性：单选框或复选框被选中。...常见的行内元素：、 等 在开发中，希望行内元素具有块元素的特性，需要使用display进行转换 选择器{display:属性值} 常用的属性值： inline：此元素将显示为行内元素（...行内元素默认的display属性值） block：此元素将显为块元素（块元素默认的display属性值） none：此元素将被隐藏，不显示，也不占用页面空间。...通过css对其进行转换 display： block、none 第2章 总结 ?
:visible").css("background", "#bbffaa"); }); //2.选择所有不可见的 div 元素 //不可见：display属性设置为none，或...为tesst style的display为"none"的div...2.当显示全部内容的时候，按钮文本为“显示精简品牌” 然后，小三角形向上。所有品牌产品为默认颜色。 3.当只显示精简品牌的时候，要隐藏卡西欧之后的品牌，按钮文本为“显示全部品牌” 然后小三形向下。...就马上执行了 原生js页面加载完成之后的触发时间是： // 原生js除了要等浏览器内核解析完标签，创建好dom对象之外， // 还需要等页面中所有元素去准备好自己显示时需要的数据。完成之后才会执行。...事件的冒泡是指，父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应。 那么如何阻止事件冒泡呢？
本节讲述单选框/下拉菜单/添加文件，综合css，html和JavaScript。 单选框： 实现的功能是：（类似平时的性格测试） 先隐藏一部分页面，然后通过点击单选框来显示。...//alert(val); for(var x=0;x<oNolRadioNodes.length;x++ ){ //找到那个被选中的单选框... 360浏览器8.1 演示结果： 一开始的页面： ? 单选框选中”是”： ? 不选中水果时的提示： ?...选中水果时的提示： ?...a:active 点击超链接时的状态。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
