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

优化单选框 radio 样式:随点击变换选中选中状态图片

果酱小程序的页面管理,其中一个模块是图片魔方,就是用户可以给小程序首页设置不同数量和布局的图片魔方来装修,其中在设置图片模仿的时候,要选择几张图布局是怎么布局的,如下图所示: 这里的布局其实是一个单选框...radio,为了加强用户体验,我们通过示意图来演示这个布局下的图片魔方在小程序前端的效果,为区分选中选中状态,每种布局需要两种状态。...contain; margin-right:10px; } input[type="radio"]{ // 隐藏 radio display: none; } #label_layout_3-1{ // 选中的效果...background-image: url(cube-radio-3-1.png); } #layout_3-1:checked + #label_layout_3-1 { // 选中的效果,使用了

2.4K20
您找到你想要的搜索结果了吗?
是的
没有找到

实战 | 0~1 自定义组件开发问卷小程序

4.由于参与问卷调查用户只需提交即可,因此设置【动作】只需勾选【新增】方法,其他均保持默认。设置完毕后需要单击页面底部的【立即创建】按钮,否则刚才添加的字段都不生效。...内容编写 1.选中【插槽 content】,单击【容器】组件,在插槽 content 中放入容器组件。 2. 选中【容器】组件,单击【表单容器】组件。 3....单击【表单单选】组件,设置表单字段名称(字段名称填写为 job),组件的标题(我的职业是),将布局方式改为垂直,并依次增加单选项的内容,单选项名称分别为前端开发、后台开发、设计师、运营、产品策划、其他,...单选内容的 value 会被提交到数据库里。 8. 调查项添加完毕后,给调查表内容底部增加提交按钮按钮放置在表单容器的插槽中,与表单组件平级,以关联到同容器内的表单组件数据。...选中大纲树的【表单容器】>【插槽 contentSlot】,单击表单类目中的【按钮】组件。将按钮组件的【标题】修改为确认提交,将【用于form组件】设置为【提交】。 9.

2.9K20

Android widget之CompoundButton

简介 具有两个状态的按钮,已选中选中。当按下或点击按钮,状态会自动更改。...toggle() — 将视图的状态更改为当前状态的逆(反向) 子类 CheckBox 复选框:可以选中或取消选中的特定类型的双状态按钮。...RadioButton 单选按钮:是可以选中或取消选中的双状态按钮。当单选按钮被取消选中,用户可以单击选中它。 注:单选按钮通常与RadioGroup在一起使用。...当多个单选按钮在RadioGroup内,检查一个单选按钮将取消选中所有其他单选按钮。 <?xml version="1.0" encoding="utf-8"?...android:textOn setTextOn(CharSequence) 当开关在 开打 状态使用的文本 android:track setTrackResource(int) 开关拇指滑动的“

2.2K20

实战 | 0~1基于模板开发问卷小程序

同时,支持在数据源管理页面自定义添加业务所需的字段,单击【添加字段】。 3. 可以增加一个职业的字段,字段标识为 job,字段类型为字符串,是否必填选择【是】,是否枚举选择【否】 4....设置完毕后单击【确定】就增加了一个字段。 5. 不需要的字段可以删除,可以单击操作列上的【删除】按钮删掉,本文以删掉感兴趣的话题字段为例。 6....改造内容 1.在【插槽 content】部分,即问卷的内容部分,模板提供了姓名、手机、兴趣话题和提交按钮。若不需要某部分内容,可选中该组件,单击右键【删除】。 2....若要添加内容,可以选中【插槽 content】下的【插槽 content Slot】组件(即表单容器的插槽容器),再单击组件库中所需添加的组件,如添加【表单单选】组件。 3....选中刚刚添加的【表单单选】组件,设置表单字段名称(字段名称填写为 job),组件的标题(我的职业是),将布局方式改为垂直,并依次增加单选项的内容,单选项名称分别为前端开发、后台开发、设计师、运营、产品策划

2.2K20

【Flutter 专题】109 图解自定义 ACERadio 单选

groupValue 从而响应 onChanged 回调; 案例尝试 onChanged Radio 单选框一般分为三个状态,分别为选中状态、选中状态和不可选中状态;onChanged 为单选选中的回调...focusColor & hoverColor focusColor / hoverColor 分别对应获取焦点的颜色与点击高亮颜色;但和尚尝试了多次效果并不明显,因需求场景较少,暂不做处理; 选中颜色...& 不可选颜色 Radio 并未提供选中状态和不可选中状态按钮颜色;和尚分析源码,发现 选中状态 与 ThemeData.unselectedWidgetColor 颜色对应,不可选中状态 与...ACERadio 为了更灵活的应用 Radio 单选框,和尚准备在此基础上扩展如下几个方面: 动态设置 选中状态颜色; 动态设置 不可选中状态颜色; 动态设置 选中按钮尺寸; 添加状态...选中按钮尺寸 Radio 单选框尺寸是固定的,和尚为了更方便的修改,添加了 radioSize 尺寸来动态修改按钮尺寸,且在动态设置按钮尺寸之后依旧支持最小点击范围的三种样式; return Column

1.5K40

文档和元素的几何滚动

同样onreset也是只能通过单击重置按钮来触发,直接调用表单的reset()方法不会触发onreset事件处理程序 用户与表单元素交互它们往往会触发click或change事件,通过定义onclick...开关按钮 复选框和单选元素为开关按钮,或称之为有两种视觉状态的按钮。即选中选中。通过对其单击,用户可以改变其开关状态。...单选元素为整组有相关性的元素而设计的,组内所有按钮的HTML属性name值都相同。按照这种方式创建的按钮为互斥的。利用表单属性的名字选中元素,它返回的一个类数组对象而不是单个元素。...单选和复选框都定义了checked属性,指定了元素当前是否选中。defaultChecked属性也为布尔值,为html的checked值,指定了元素在第一次加载页面是否选中。...当用户单击按钮,会触发onclick事件,由于改变状态会触发onchange事件,但是,当用户单击其他单选按钮而导致这个单选按钮状态的改变,后者不触发onchange事件。

5.2K00

后台系统设计(上篇:选择)

·在用户与单选按钮交互,请提供良好视觉反馈,且按钮本身状态提供良好的能供性(默认、悬停、选中和禁用)。...全选操作(全选状态): ?...·在用户与复选框交互,请提供良好视觉反馈,且按钮本身状态提供良好的能供性(默认、悬停、选中、禁用和全选状态)。 讨论:仅有两个互斥的选项(二元)是选择单选按钮还是复选框?...最佳用法 ·在较小的空间下,对多个选项进行选择或内容较为次要且不需要一直显示,下拉菜单是不错的选择。若选项较少,考虑使用单选框(当进行单项选择)或复选框(当进行多项选择)。...·下拉菜单选项按照某种逻辑顺序排序。例如,按照重要程度或被选择程度(可能性)进行排列。 ·对于大多数操作,当单击菜单或以外区域,菜单应该收起关闭;如果点击的菜单项是多选操作,则菜单应保持打开状态。

9.6K21

架设邮件服务器-windows 2003 POP3服务,SMTP服务收发邮件「建议收藏」

选中“为此邮箱创建相关联的用户”单选按钮,在“密码”与“确认密码”密码框中为新建用户ln1设置的密码,如图6-41所示,然后单击“确定”按钮。...选中“不再显示此消息”单选按钮,然后单击“确定”按钮,如图6-42所示。 (5)然后按照(3)的操作,创建ln2@heuet.com邮箱,如图6-43所示。...图6-48 选磁盘属性 图6-49选配额项 (4)选中“将磁盘空间限制为”单选按钮,在此可以对启用磁盘配额后新创建的用户的邮箱大小进行设置,如图6-50所示。...“详细信息”按钮选中“域名系统(DNS)”单选按钮,然后单击“确定”按钮返回“Windows组件”界面,然后单击“下一步”按钮进行安装,如图6-56所示。...单击“下一步”按钮,进入“区域类型”页面,选中“主要区域”单选项,如图5-46所示。

6K21

Windows下Apache+MySQL+PHP运行环境的安装图文方法

选中I accept the terms in the license agreement 单选按钮后,单击NEXT按钮,如图1所示,进入程序描述与说明界面。...最后还有两个单选按钮,如果选中默认的第一个单选按钮,说明该服务器对所有人开放,并且服务器的端口号为80,这个是推荐选项。...第二个单选按钮是该服务器仅对当前用户开放,并且服务器端口为8080.这里选中第一个选项,然后单击NEXT按钮,进入Setup Type(安装 类型)界面 ,如果3所示。...图3 e) 在Setup Type界面中可以选择安装类型,有Typical默认安装,Custom用户自定义安装两种安装方式,这里保持自定义安装选项即可,单击NEXT按钮,进入Destination Folder...安装结束后,单击Finish按钮结束安装程序。 h) 安装完成后,Apache服务器将自动开启。桌面右下角将出现一个图标,当前Apache服务器启动,图标样式为 ;服务器启动,图标样式为 。

1.3K20

三种方式制作数据地图

概括来说其主要通过自定义矢量地图和VBA编程来为矢量地图填充颜色及设置透明度的方式实现。话不多说,还是先上效果图: 首先是全国省份色温图,点击单选按钮可切换不同指标。...另有下拉列表可选择单击各省份,是显示该省份标签,还是下钻到该省份的各城市色温图;下钻到各城市后,依然可以通过点击单选按钮切换该省份各城市的不同指标色温图。...2.2在全国地图中,插入六个单选按钮 单击右键"编辑文字",分别为各单选按钮命名。接下来,设置控件格式,将单元格链接设置为"全国map"工作表B4单元格。...2.3为六个单选按钮赋宏 按下ALT+F11键,插入如下代码,其可实现勾选单选按钮,会根据单选按钮对应的指标,为各省份矢量图填色和设置透明度。 右键点击单选按钮,指定宏。...这里分两个步骤: Step1:编写单击突显子程序:单击任一省份,该省份矢量图边界变成红色线条,同时之前选中的省份矢量图边界的红色线条消失。

9.1K20

CSS魔法堂:改变单选框颜色就这么吹毛求疵!

若抛开input[type=radio]重新开发一个,发现要模拟选中选中、不可用等状态很繁琐,而涉及单选框组就更烦人了,其实我们可以通过label、::before、:checked和tabindex...上图中左侧就是原生单选框,右侧为我们自定义单选框。从上到下依次为选中选中、获得焦点和disabled状态的样式。...appearance{ opacity: .5; } label.radio:focus{ outline-offset: 0px; outline: #999 auto 5px; } /* 通过鼠标单击获得焦点...-- 选中状态 --> <i class="radio__appearance...当<em>自定义</em><em>单选</em>框内元素采用inline-block<em>时</em>,若vertical-align设置稍有不慎就会导致内部元素所在的line box被撑高,从而导致<em>自定义</em><em>单选</em>框所在的line box高度变大。

2.7K30

C#学习笔记—— 常用控件说明及其属性、事件

1、常用属性: (1)Checked属性:用来设置或返回单选按钮是否被选中选中时值为true,没有选中时值为false。...(2)AutoCheck 属性:如果 AutoCheck 属性被设置为 true(默认),那么当选择该单选按钮,将自动清除该组中所有其他单选按钮。...2、常用事件: - 10 - (1)Click事件:当单击单选按钮,将把单选按钮的Checked属性值设置为true,同时发生Click事件。 ...值为true表示可用,值为false表示当前禁止使用。 (5)RadioCheck 属性:用来获取或设置一个值,通过该值指示选中的菜单项的左边是显示单选按钮还是选中标记。...值为true将显示单选按钮标记,值为false显示选中标记。 (6)Shortcut属性:用来获取或设置一个值,该值指示与菜单项相关联的快捷键。

9.5K20

安装 VM 虚拟机并安装RHEL 7【附VM12永久激活码】

选择虚拟机软件的安装位置(可选择默认位置),选中“增强型键盘驱动程序”复选框后 单击“下一步”按钮,如下图 所示。【此功能可以在本系统和虚拟机系统中无缝切换键盘,很方便哦!】...单击“创建新的虚拟机”选项,并在弹出的“新建虚拟机向导”界面中选择“典型”单选按钮: image.png 选中“稍后安装操作系统”单选按钮【因为后续我们要自定义系统】: image.png 将客户机操作系统的类型选择为...“Linux”,版本为“Red Hat Enterprise Linux 7 64 位”,将虚拟机系统的“最大磁盘大小”设置为 20.0GB(默认即可),单击自定义硬件”按钮,内存和处理器情况视自己电脑配置而定...在安装界面中单击 SOFTWARE SELECTION 选项: image.png 返回到安装主界面,单击 Begin Installation 按钮后即可看到安装进度,在此处选择 ROOT PASSWORD...在界面中选择默认的语言 English (United States),最后单击 Start using Red Hat Enterprise Linux Server 按钮

3.3K00

CheckBox和RadioButton使用大全

一、CheckBox CheckBox(复选框)是Android中的复选框,主要有两种状态:选中选中。...通过isChecked方法来判断是否被选中,当用户单击可以在这两种状态间进行切换,会触发一个OnCheckedChange事件。...二、RadioButton RadioButton(单选按钮)在Android开发中应用的非常广泛,比如一些选择项的时候,会用到单选按钮。它是一种单个圆形单选框双状态的按钮,可以选择或不选择。...在RadioButton没有被选中,用户能够按下或点击来选中它。但是,与复选框相反,用户一旦选中就不能够取消选中。当用户选中的时候会触发一个OnCheckedChange事件。...为了监听单选按钮组的选中事件,在Java代码中为其添加选择事件监听器,具体代码如下: public class MainActivity extends AppCompatActivity {

3.8K100

WinForm企业应用框架设计【四】动态创建业务窗体

闲话休提~ 一:自定义Tab按钮 如图所示 我们的tab按钮左部是文字;右部是关闭按钮; 此按钮有两种状态:选中选中 选中按钮鼠标滑上背景色会变为淡蓝色; 选中按钮背景色是黄色 关闭按钮鼠标滑上去是深黄色...EditorBrowsableState.Always)] public event EventHandler OnSelect; /// /// 单击关闭按钮事件...TAB按钮取消选中, 子菜单的背景颜色变成透明的,(其实就是子菜单取消选中) 事件处理的开始取消了事件注册 事件处理的结束有把事件注册进去了 这样做主要是为了避免多次触发事件 Utils.GetMainForm...} mf.TabContainerP.Controls.Remove(FormTabBTN); } 取消事件注册 移除历史记录 取消子菜单选中...打开最近一次打开的业务窗体(如果有的话) 重写设置tab按钮的位置(主要是被关闭的tab按钮的右边的tab按钮) 删除tab按钮 三:动态创建业务窗体 我们在上一节中只讲了子菜单的滑入和滑出事件,而没有讲单击事件

66830
领券