适配性强的移动端select选项框

最新推荐文章于 2024-05-14 10:03:52 发布
最新推荐文章于 2024-05-14 10:03:52 发布
阅读量860 收藏 2
点赞数 2
分类专栏： 前端开发 文章标签： html5 android ios 前端 安全
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/meng_nn/article/details/107535958
版权

在这里插入图片描述

需求来源

原生的select有很多样式不能随意改动，比如不能设置居中不生效，select框长度不能根据内容自适应等。而且在ios端和安卓端显示的样式不统一。所以为了解决以上问题，基于swiper对select进行了优化改进，改进后的样式可以随意设置，实现多端样式统一。

html源码

需要在html中引入需要依赖的css和js

<link rel="stylesheet" type="text/css" href="select/css/style.mobile.css" />
<link rel="stylesheet" type="text/css" href="select/css/swiper.min.css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"
最低0.47元/天 解锁文章
孟繁胜游
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
修改select默认样式,移动端和pc端通用
Haines
06-08 687
<div class="select" style="margin-top:0;outline:none;border:1px solid #BBBBBB;border-radius:4px;position:relative;"> <select id="orderTimeDataSel" class="text" style="height:40px;-webkit-appearance:none;appearance:none;border:none;font-size:1...
html select样式优化,jQuery+CSS实现select列表菜单表单样式美化
weixin_35778830的博客
06-03 544
DIV+CSS+jQuery表单美化SELECT列表菜单方法与代码SELECT下拉列表菜单美化效果截图-SELECT美化后的列表菜单表单控件效果图我们使用CSS控制表单输入框样式美化没问题、CSS设置按钮表单样式没问题，比较头疼的是一般CSS是不能单纯像输入框、按钮设置美化，单纯使用CSS美化html SELECT无效，至少IE6、IE7等浏览器不支持CSS样式美化。这个时候divcss5整理一个...
推荐开源项目：iOSselect —— 打造一致的移动端下拉菜单体验
gitblog_00041的博客
05-14 333
推荐开源项目：iOSselect —— 打造一致的移动端下拉菜单体验 项目地址:https://gitcode.com/zhoushengmufc/iosselect 项目简介 iOSselect 是一款专为解决浏览器（特别是在Android和iOS设备）下<select>标签样式和交互不统一问题的组件。它以iOS设备的下拉菜单交互和设计为蓝本，提供了一个跨平台、可定制化的解决方案，让...
手机端制作之select框的使用
qq_wxq的博客
05-31 2591
今天是克服拖延症的第四天吧，准确来讲今天不是很成功因为今天花了点时间刷了会儿小视频，好啦好啦，话不多说，我们开始吧~ 今天分享的主要内容是手机端在不使用框架的前提下，使用原生的select框（哈哈，开个玩笑~）来适应手机端页面。 select框的“初始化”——去掉select框的默认样式 select框在苹果手机端的处理这部分涉及到js呦~ 下面我们来一起看看吧~ select框的“初始化” 在手机端做页面的时候，一般不用考虑select中option的显示，因为在手机端，不同型号的手机甚至同一个型号的手机
html select美化插件,Select-or-Die – jQuery下拉框美化插件
weixin_30118919的博客
06-16 307
Select-or-Die – jQuery下拉框美化插件分类：代码日期：2016-08-02点击(41,558)下载(1)来源：未知收藏简介表单的一些元素是很难或不能设置样式的，如单下拉框(select)、选框(radio)和复选框(checkbox)等等，它们会根据不同的系统、不同的主题而不同，所以有些时候它们的默认样式可能会与你的设计格格不入，这时候也许美化插件是个不错的选择。Select-...
swiper模拟下拉选择
成长笔记
10-23 820
/*JS部分*/ ;(function(){function hSdrop(options){var self=this;self=$.extend(self,{els:'',},options);$(self.els).click(function(e){self.init(this);})} hSdrop.prototype={init:function(el){var kl='' kl+...
select标签和input标签在ios(苹果)手机上显示的很奇怪
笑到世界都狼狈的博客
09-06 2676
做了个移动端页面，在安卓手机上显示的好好的，结果select标签在苹果手机上显示出了ie8的效果，真的是巨丑无比，而且input标签页发生了变化。 那是因为ios有自己自带的样式，我们需要将默认样式取消掉，然后在设计自己的样式 input[type=datetime-local]{ -webkit-appearance:none; outline:none; ...
IOS与安卓关于select样式兼容性问题
helloword_js的博客
03-26 612
让我们先来看看IOS和安卓的区别 造成这样的原因是IOS有自己的默认样式 所以我们在兼容的时候首先清除默认的样式 -webkit-appearance: none; 然后select的边框已经倒三角样式都会被清除 所以我们需要自己绘制倒三角 添加border .slectIos1{ width: 0; height: 0; border-top: 1rem solid black;...
html select样式修改,select标签的默认样式修改
weixin_33305182的博客
06-03 3893
在项目中，用到select标签，需要对select标签自定义样式。在chrome浏览器中会对select有一个默认的border-radius，并且无法去掉。可以通过下面的方法来解决：1、需要通过下面的css才能修改select的border-radius.select {-webkit-appearance:none;-webkit-border-radius: 0px;}但是这个方法会让sel...
html中select样式兼容,ul模拟select下拉框样式解决原生select的css兼容问题
weixin_28848317的博客
06-15 480
最近项目用到了下拉菜单，又不想引入其他UI框架来实现，在网上查了好久能不能用css+js来兼容select在各个浏览器的不适应，答案是否定的！无法兼容，这条路宣告堵死，其实还是因为自己懒不愿意自己做，不要在意这些细节，回到正题。所以又开始查了第二方案，自定义下拉框来仿select，还是不够理想，网上的帖子不是做的太丑就是bug太多，那我打算找个好看的样式改改功能吧。仿select下拉框样式样式为图...
Drop.js-实用的JavaScript下拉弹出层插件
12-11
Drop.js是一款JavaScript和CSS实用下拉弹出层插件。该插件基于Tether.js来定位弹出层，可以制作多种弹出层效果。
定制html的select标签样式
04-13
NULL 博文链接：https://lanhuidong.iteye.com/blog/1722586
html单选框样式复写,总结：如何修改美化radio、checkbox、select的默认样式
weixin_29962473的博客
06-03 719
现在前端页面效果日益丰富，默认的input组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求，在此特地整理下修改radio、CheckBox、 样式的方法。原理：大致原理都是使用原生的checkbox或input标签，在其后面设置相关联的label元素。给元素设置为透明，然后通过定位让用户看到的是元素，利用css的原生属性来判断用户的操作，设置选中后的label样式,即input...
[原创首发] js手机移动端选择插件 mobile-select
热门推荐
onlyhom's notebook
02-27 8万+
mobile-select 一款多功能的手机移动端选择组件，支持单选到多选、支持多级级联、提供自定义回调函数、提供update函数二次渲染、重定位函数、兼容pc端拖拽等等。mobileSelect.js是一个js移动端选择控件，不依赖任何库;可传入普通数组或者json数组;可根据传入的参数长度，自动渲染出对应的列数，支持单项到多项选择;自动识别是否级联;选择成功后，提供自定义回调函数callback()返回当前选择
CSS select样式优化
weixin_34413065的博客
12-12 280
下拉选择菜单基本的CSS样式不怎么好看，通过一些简单的样式优化，就可以起到美化的作用了。 <div class="sel_wrap"> <label>请选择您所在的城市</label> <select class="select" name="" id="c_city"> <option value="0">请选择您所在的城市...
移动端关于select最佳兼容性解决方案(css)
lb182的博客
12-09 1万+
移动端关于select最佳兼容性解决方案(css)
移动端select框的样式
weixin_30569033的博客
07-19 1221
非原创，只是一个链接https://github.com/onlyhom/mobileSelect.js 原生js移动端选择控件，不依赖任何库 可传入普通数组或者json数组 可根据传入的参数长度，自动渲染出对应的列数，支持单项到多项选择 自动识别是否级联 选择成功后，提供自定义回调函数callback() 返回当前选择索引位置、以及选择的数据（数组/json） 每次手势滑动结束...
FPGA适配性测试工具
最新发布
06-19
FPGA（Field-Programmable Gate Array）适配性测试工具是一类专门用于验证和调试FPGA设计的软件工具。这些工具通常包括以下功能： 1. 设计输入和配置：它们用于加载和管理FPGA设计文件，如Verilog或 VHDL源代码，并将设计编译成适合特定FPGA器件的配置文件。 2. 仿真器和模型：它们提供硬件描述语言(HDL)级别的模拟环境，以便在实际硬件上编程之前检查设计的功能和行为。 3. 接口分析：测试工具帮助开发者理解和验证设计与外部接口（如PCIe、USB等）的兼容性和性能。 4. 功能测试：执行自定义测试脚本来检查设计中的各个模块是否按预期工作。 5. 性能分析：评估设计的资源使用情况、延迟和功耗，优化设计以满足性能和功耗目标。 6. 时序分析：确保设计满足给定的时序约束，避免潜在的逻辑错误和延迟问题。 7. 再编程能力：允许在硬件运行过程中更新设计，这对于原型开发和快速迭代非常有用。 8. 错误检测和调试：提供故障诊断和调试工具，帮助开发者定位并修复设计中的问题。 相关问题--: 1. FPGA适配性测试工具有哪些主要用途？ 2. 如何使用测试工具进行时序分析？ 3. FPGA调试过程中，如何利用测试工具进行错误定位？ 4. 对于持续集成环境，FPGA适配性测试工具如何支持版本控制和自动化？

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值