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

最新推荐文章于 2024-08-08 07:25:01 发布

孟繁胜游

最新推荐文章于 2024-08-08 07:25:01 发布

阅读量905

点赞数 2

分类专栏：前端开发文章标签： html5 android ios 前端安全

本文链接：https://blog.csdn.net/meng_nn/article/details/107535958

版权

为解决原生select样式限制及多端显示不一致的问题，本文介绍了一种基于swiper优化的Select组件。通过自定义html和js源码，实现了样式可配置、多端样式统一的select组件，同时提供了选择确认和取消的功能。

摘要由CSDN通过智能技术生成

在这里插入图片描述

需求来源

原生的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元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

孟繁胜游

关注关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

dji psdk开发（4）自定义控件widget

热爱生活，忠于自己

07-01

2000

文章目录1、自定义控件UI介绍1.1、主界面的控件1.2 配置界面的控件1.3 控件配置文件1.4 控件图标2、自定义控件功能实现2.1 编写控件配置文件2.2编程实现2.2.1 控件注册函数2.2.2 控件注册参数2.2.3 控件处理回调函数2.2.4 操作控件效果2.2.5 控件默认选项/初始值3、按键映射与航点任务基于PSDK开发的负载，如何快速验证负载设备的功能？需要使用到PSDK 库中的“自定义控件”模块。 “自定义控件”是一个将“负载设备的功能”封装为按钮、开关以及范围条等控件的功能；使用D

Unity编辑器扩展 UI控件篇

xinzhilinger的博客

07-02

3749

Unity引擎内编辑器扩展

参与评论您还未登录，请先登录后发表或查看评论

移动端的select，或者combobox

11-18

是一个插件，很好用，如果大家不愿意下我的我也可以推荐2个我原来下载的那个地址 http://www.jq22.com/jquery-info16748 http://www.jq22.com/jquery-info14679 超好用

美化select框手机端

xm的博客

05-30

3351

<div class="select" style="margin-top:0px;outline:none;border:1px solid #BBBBBB;border-radius:4px;position:relative;"> <select id="orderTimeDataSel1" class="text" style="height:40px;-webk...

Mobile Select：移动端滚动选择器的全能解决方案

最新发布

gitblog_00174的博客

08-08

865

Mobile Select：移动端滚动选择器的全能解决方案 mobile-selectmobile-select: 是一个多功能的移动端滚动选择器，支持单选到多选，多级级联，提供回调函数和异步数据更新。项目地址:https://gitcode.com/gh_mirrors/mo/mobile-select 在移动端开发中，选择器是一个常见且重要的组件。今天，我们将介绍一款功能强大、易于集成的移动...

移动端select样式问题

weixin_41674235的博客

10-10

705

设置select的背景色在网页上有变化，但是移动端流量是发现背景色还是白色代码：只需要在样式中加上-webkit-appearance: none;就会有效 .input-100{ width: 100%; height: .65rem; -webkit-appearance: none; background-color: rgba(255,255,255,.15); border-radius: .06rem; color: #fff; padding: 0 .2rem; fon

html5 手机端 select,适配性强的移动端select选项框

weixin_30849865的博客

06-16

2114

需求来源原生的select有很多样式不能随意改动，比如不能设置居中不生效，select框长度不能根据内容自适应等。而且在ios端和安卓端显示的样式不统一。所以为了解决以上问题，基于swiper对select进行了优化改进，改进后的样式可以随意设置，实现多端样式统一。html源码需要在html中引入需要依赖的css和js然后创建一个select大容器selectbL，然后在容器里面分别创建选项回显容...

html中select样式兼容,ul模拟select下拉框样式解决原生select的css兼容问题

weixin_28848317的博客

06-15

512

最近项目用到了下拉菜单，又不想引入其他UI框架来实现，在网上查了好久能不能用css+js来兼容select在各个浏览器的不适应，答案是否定的！无法兼容，这条路宣告堵死，其实还是因为自己懒不愿意自己做，不要在意这些细节，回到正题。所以又开始查了第二方案，自定义下拉框来仿select，还是不够理想，网上的帖子不是做的太丑就是bug太多，那我打算找个好看的样式改改功能吧。仿select下拉框样式样式为图...

下拉框和多选框：HTML表单元素的实际运用

通过表单元素，用户可以方便地输入文本、选择选项、勾选复选框等，从而与网站进行交互。 ## 1.2 HTML中常见的表单元素有哪些？常见的HTML表单元素包括输入框（input）、下拉框（select）、多选框（checkbox）、...

银行数据类系统建设

xzhu4571的博客

10-20

794

本文提供了银行业信息体系的建设，包含了底层数据仓库、数据集市的建设，数据中台的建设，以及上层应用（指标管理平台、管理驾驶舱、绩效管理系统、监管报表系统、数据质量系统等）的建设

移动设备 select jquery插件

06-16

仿苹果select jquery 插件，可用于手机端

select默认样式美化代码兼容移动端和pc端

09-25

在搞前端时发现select样式已经丑到爆了。于是找了一些资源对其进行美化，个人感觉是相当不错的，最起码兼容移动端和pc端，这可是它的优势哦

定制html的select标签样式

04-13

NULL 博文链接：https://lanhuidong.iteye.com/blog/1722586

mobile-select手机端选择器的使用

不积跬步，无以至千里

08-17

1034

手机端select选择器的使用。组件地址:Gitee:由于Github众所周知的原因，如果访问不了，可以访问Gitee。

探索Mobile Select：一款强大的移动端滚动选择器

gitblog_00151的博客

08-08

448

探索Mobile Select：一款强大的移动端滚动选择器 mobile-selectmobile-select: 是一个多功能的移动端滚动选择器，支持单选到多选，多级级联，提供回调函数和异步数据更新。项目地址:https://gitcode.com/gh_mirrors/mo/mobile-select 在移动端开发中，选择器组件是不可或缺的一部分，它能够为用户提供直观且便捷的数据选择方式。今...

修改select默认样式,移动端和pc端通用

Haines

06-08

715

<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...

移动端关于select最佳兼容性解决方案(css)