【HTML+CSS】教你切图篇3-自定义单选、多选、下拉框的实现

支持单选多选过滤的下拉框插件 先看看效果 直接上代码 js // 实例.getSelectValue() 获取选中值id // 实例.getSelectText() 获取选中值text // 实例.getSelectObj() 获取选中值Obj // 实例.setDefault([]) 设置默认title值 传入id // 实例.setDisabled(boolean) 设置是否可点击下拉 (function... 阅读详情

大家都知道,默认的单选、多选、下拉控件样式实在是丑哭了。下面小编介绍两种实现单选、多选、下拉控件的样式。首先来介绍第一种:

1.用CSS+HTML实现

这种实现方式是简单,获取数据方便,兼容主流浏览器,缺点就是IE8以及以下的浏览器都不兼容,所以要兼容到更低版本的IE浏览器就需要用到第二种方法了。

首先先看效果图:

代码如下:

<!DOCTYPE html>
<html>
<head>
	<title>表单测试</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
	/*复选 S*/
	/*将input隐藏,设置label标签的背景,替换成checkbox,实现自定义标签样式*/
	.checkbox{
		width: 100px;height: 80px;float: left;
	}
	.checkbox01{
		display: none
html+css 实现单选和多选按钮(input checkbox按钮 radio按钮) 纯css实现,没有js。点击事件是input的checked实现的。含具体代码帮助大家深入理解,彻底掌握!直接看代码,可以一键复制,查看效果。 阅读详情

相关推荐

JQuery实现DIV模拟的单选与多选下拉框

设计一个既美观又功能强大的下拉选择框是一个挑战,它需要将用户界面(UI)设计和用户体验(UX)结合起来,同时还需要考虑代码的实现逻辑。在本章节中,我们将深入探讨如何构建一个拥有自定义样式和交云的下拉选择框。在开发Web应用时,浏览器兼容性问题几乎是每个开发人员都会面临的一大挑战。不同的浏览器,如IE和Firefox,对于Web标准的实现不尽相同,这导致了多种兼容性问题的产生。常见的兼容性问题类型包括但不限于:DOM和JavaScript解析差异。

weixin_42551310的博客 886

Layui-formSelects多选下拉框功能详解与应用

本文还有配套的精品资源,点击获取 简介:本文深入探讨了Layui-formSelects这一专为Layui框架设计的多选下拉框解决方案的核心特性和使用方法。详细介绍了其丰富的功能,如删除选项、清空选择、pane模式、分组多选以及自定义提示信息等,以及如何通过引入资源、结构配置、初始化组件和事件监听来实现高效的用户交互体验。文章还包括了自定义配置与扩展的可能性,最终总结了La...

weixin_32306683的博客 4067

基于Flex布局的多选下拉框设计与实现

多选下拉框的入口通常是一个类似<input>的区域,但它并非真正的输入字段(除非启用搜索)。为了兼顾语义与交互,推荐使用作为容器,并结合ARIA属性描述其行为。<div<inputreadonlyplaceholder="请选择..."/></div>为了让父级组件感知状态变化,应派发标准});// 外部监听示例});设计价值:- 符合 Web Components 标准;- 支持跨框架通信;- 可被自动化测试工具捕获;

weixin_42263617的博客 788

前端开发必备:多选下拉框MultiSelect综合指南

多选下拉框是一种扩展了传统单选下拉框功能的控件,允许用户通过复选框(checkbox)来选择多个选项。这种控件在处理表单提交、配置设置、多值查询等任务时提供了极大的便利。

weixin_28922227的博客 1054

利用div弹出层实现自定义单选功能

Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个页面的情况下,能够更新部分网页的技术。它允许网页实现异步数据通信,通过与服务器交换数据来更新部分网页,这使得用户无需刷新整个页面即可与服务器进行数据交换。在Web应用中,Ajax的使用场景非常广泛,例如动态显示搜索建议、即时更新内容、处理表单提交等。通过Ajax,可以构建更为流畅的用户交互体验,提升页面的响应速度和应用性能。

weixin_35756624的博客 1159

javascript+css 下拉多选框插件

下拉多选框插件 javascript+css

html多选下拉框 ,CheckBox的Select组件 可多选的下拉框

html多选下拉框 ,CheckBox的Select组件。可多选的下拉框。

三菱RJ71EIP91与SYSMAC Gateway通讯配置

三菱RJ71EIP91与SYSMAC Gateway通讯配置

zhang1270的博客 1527

AI驱动的iOS逆向工程自动化:14阶段工作流与Ghidra集成实践

逆向工程是软件安全分析的核心技术,通过反汇编、调试等手段解析程序内部逻辑与数据流。其原理在于将编译后的二进制代码还原为可理解的逻辑结构,从而发现潜在漏洞或理解软件行为。在移动安全领域,iOS逆向工程具有重要技术价值,能够用于安全审计、漏洞挖掘与恶意软件分析。传统iOS逆向依赖ipsw、class-dump、Frida等工具链组合,存在学习曲线陡峭与流程碎片化问题。本文介绍的ios-reverse-skills项目创新性地将14阶段逆向工程方法论封装为AI可调用的标准化脚本集,通过Ghidra脚本实现Swif

weixin_27268733的博客 436

Cadence ADE实战:1GHz VCO相位噪声仿真全流程(附PSS/Pnoise避坑指南)

本文详细介绍了在Cadence ADE环境中对1GHz VCO进行相位噪声仿真的完整流程。重点剖析了PSS(周期性稳态分析)和Pnoise(周期性噪声分析)两大核心引擎的关键参数设置与避坑指南,帮助射频与模拟IC设计者准确评估VCO性能,解决仿真不收敛、结果异常等常见问题。

rock5的博客 672

Ubuntu 22.04蓝牙开关秒关?别慌,可能是这个Intel固件文件在搞鬼

本文深入解析Ubuntu 22.04蓝牙开关秒关问题,指出Intel固件文件缺失是常见原因,并提供详细修复方案。通过确认硬件型号、检查固件文件及智能替代方案,帮助用户快速解决蓝牙故障,提升系统稳定性。

weixin_30247307的博客 758

台积电技术研发实力

台积电技术研发实力 台积电在半导体行业的地位毋庸置疑。他们究竟有多强大,大部分读者了解得可能非常片面。从最新公布的2019年财报里,看看台积电的真正实力。 一、台积电在市场上的地位 根据公司财报,台积公司在先进制程技术、特殊制程技术,以及先进封装技术的发展上持续领先全球集成电路制造服务领域,2019年的市场占有率为52%。台积公司总体营收以地区划分(主要依据客户营运总部所在地),来自北美市场的营收占台积公司总体营收的60%、日本与中国大陆以外的亚太市场占9%、中国大陆市场占20%、欧洲、中东及非洲市场占6

吴建明wujianming_110117 1902

车载网络测试实操源码_使用CAPL解析VBF文件

VBF(Versatile Binary Format)文件是一种二进制文件格式,被沃尔沃、福特、马自达、吉利等汽车制造商广泛采用。这种格式无法使用我们常规的烧录器进行刷写,通常需要进行解析转化。如果各位需要自己编写软件或脚本来刷写VBF文件,或者需要对刷写功能进行测试时,那么本篇文章就会对你非常有用。今天我们就来讲一下如何使用CAPL脚本对VBF文件进行数据解析。VBF文件包含三部分:VBF版本段、文件头段、数据段。前面的版本段和文件头段是ASCII码,包含版本、地址、校验码等信息

文章主要涉及嵌入式软件开发、测试、项目管理等,欢迎交流,共同进步。 3004

PD3.0详解 电源规则,全解!!!全解!!!

电源规则 大师匈今天谈一下PD3.0的电源规则,PD3.0标准标定的规则。 USB协议声称,为了世界和平世界环境,让大家用上统一标准的充电器,不用再为每一个用电设备都配一个专门的充电器,这些充电器各种各样的都有,所以有时候大师匈也很烦!!!那么为了维护世界和平,USB协议呢就制订了这个PD快充协议,还有它的规则,只要全世界都用PD,就解决了这个大问题。 在这里先了解一个关键字,PDP: Power Delivery Power PD电源的功率。 每个PD充电产品的功率要以0.5W的精度上报,比如大师匈做的P

大师匈的博客 1万+

四足狗机器人硬件开发技术栈详解

本文系统介绍了四足狗机器人的硬件开发技术,重点分析了五大核心模块:机械结构(骨架设计)、动力系统(关节驱动)、感知系统(环境监测)、控制系统(决策中枢)和电源系统(能源管理)。文章详细阐述了各模块的选型标准、技术要点和协同设计原则,提供了从需求定位到组装调试的完整开发流程,并针对常见问题给出解决方案。随着材料轻量化、模块标准化和AI集成化的发展趋势,四足机器人硬件将向更灵活、更智能的方向演进,为工业巡检、应急救援等场景提供更强大的移动平台支持。

start_up_go的博客 287

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain&#39;s apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath(&#39;DeepLearnToolbox&#39;));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand(&#39;state&#39;,0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W&#39;); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand(&#39;state&#39;,0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = &#39;sigm&#39;;%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, &#39;Too big error&#39;);```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand(&#39;state&#39;,0)sae = saesetup([784 100]);sae.ae{1}.activation_function = &#39;sigm&#39;;sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)&#39;)% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = &#39;sigm&#39;;nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, &#39;Too big error&#39;);```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x&#39;,28,28,60000))/255;test_x = double(reshape(test_x&#39;,28,28,10000))/255;train_y = double(train_y&#39;);test_y = double(test_y&#39;);%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you&#39;ll get around 1.2% errorrand(&#39;state&#39;,0)cnn.layers = { struct(&#39;type&#39;, &#39;i&#39;) %input layer struct(&#39;type&#39;, &#39;c&#39;, &#39;outputmaps&#39;, 6, &#39;kernelsize&#39;, 5) %convolution layer struct(&#39;type&#39;, &#39;s&#39;, &#39;scale&#39;, 2) %sub sampling layer struct(&#39;type&#39;, &#39;c&#39;, &#39;outputmaps&#39;, 12, &#39;kernelsize&#39;, 5) %convolution layer struct(&#39;type&#39;, &#39;s&#39;, &#39;scale&#39;, 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, &#39;Too big error&#39;);```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand(&#39;state&#39;,0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, &#39;Too big error&#39;);%% ex2 neural net with L2 weight decayrand(&#39;state&#39;,0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);%% ex3 neural net with dropoutrand(&#39;state&#39;,0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);%% ex4 neural net with sigmoid activation functionrand(&#39;state&#39;,0)nn = nnsetup([784 100 10]);nn.activation_function = &#39;sigm&#39;; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);%% ex5 plotting functionalityrand(&#39;state&#39;,0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = &#39;softmax&#39;; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand(&#39;state&#39;,0)nn = nnsetup([784 20 10]); nn.output = &#39;softmax&#39;; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

pscad IEEE标准系统搭建说明

pscad IEEE标准系统搭建说明,包含典型的IEEE 9节点、14节点、30节点、39节点和118节点系统。内含标准测试系统的原始数据和潮流结果。

上一篇: 【Java】使用Json-lib序列化关联对象的异常解决
下一篇: 【JS】IP大小端转换&十进制数字转换成IP
励志故事
博客等级 码龄12年 99粉丝 110原创
评论 6
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值