移动端H5页面端如何除去input输入框的默认样式

发布时间:2020-09-29 16:41:58

来源:亿速云

阅读:124

作者:小新

这篇文章主要介绍了移动端H5页面端如何除去input输入框的默认样式,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

前两天在开发在微信访问的HTML5页面,里面有个订单查询要选择时间,刚开始使用的输入框,没加任何的样式,效果是白色的背景再加上边框很丑,完全与整个背景不协调。

刚开始设置了输入框背景色透明(background-color:transparent;),在iOS上面背景色和边框都没有了,但是在andriod上边框和背景色还是存在。后来加上样式FILTER: alpha(opacity=0),在andriod中就去掉了边框和背景。

去掉背景和边框比以前好看多了,但是因为类型是date,所以右边有个图标,感觉不协调,加上appearance:none;样式图标没了,比以前更好看了。下图是效果:

jsp 部分代码:

" class="imgCen" οnclick="updateDate(-1);"/>

" class="imgCen" οnclick="updateDate(1);" style="margin-left: -8px;"/>

输入框样式代码:.date input[type=date] {

background-color:transparent;

color:#fff;

FILTER: alpha(opacity=0); /*androd*/

appearance:none; /*下拉框去掉右侧图标*/

-moz-appearance:none;

-webkit-appearance:none;

}

感谢你能够认真阅读完这篇文章,希望小编分享移动端H5页面端如何除去input输入框的默认样式内容对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,遇到问题就找亿速云,详细的解决方法等着你来学习!

html5首页图标怎么除掉,移动端H5页面端如何除去input输入框的默认样式相关推荐

  1. php清除h5格式,移动端H5页面端怎样除去input输入框的默认样式

    这次给大家带来移动端H5页面端怎样除去input输入框的默认样式,移动端H5页面端除去input输入框的默认样式的注意事项有哪些,下面就是实战案例,一起来看一下. 前两天在开发在微信访问的HTML5页 ...

  2. 解决 - 移动端(H5) ios 在点击input输入框,弹起软键盘后,顶部输入框失效的问题

    问题: 在项目开发过程中发现这个问题,在安卓下是正常的,ios固定定位就会失效,在网上看了许多ios兼容的博客,都没有效果,卡了很久, ios 的软键盘弹出后,会把页面撑高.他就不在原来的位置定位了 ...

  3. 移动端H5页面编辑器开发实战--原理结构篇

    一.前言 在去年10月份左右,接到了需求:开发一个H5移动端页面编辑器的任务,目的主要是解放公司内在制作这类网页的所投入的人力以及解决使用外部H5编辑器所涉及到的版权问题. 因此,一款能够与市面上已经 ...

  4. h5页面生成图片分享到微信js_微信端h5页面如何调用分享页面的接口

    这次给大家带来微信端h5页面如何调用分享页面的接口,微信端h5页面调用分享页面接口的注意事项有哪些,下面就是实战案例,一起来看一下. 最近公司做了一个给学生投票的H5页面,主要是在微信端使用,需要添加 ...

  5. h5 默认为移动端页面_html5 移动端H5页面设计尺寸规范

    原标题:html5 移动端H5页面设计尺寸规范 当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师 ...

  6. 【通用CSS模板】移动端H5页面统一样式.css

    /*移动端H5页面统一样式----------------------------------------*/ @charset "UTF-8"; body, html, li, ...

  7. 移动端H5页面高清多屏适配方案

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  8. 教你如何用 lib-flexible 实现移动端H5页面适配

    前话 好久没写教程了(可能会误导新手的菜鸟教程( ̄▽ ̄)"). 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实 ...

  9. m3u8 video ios h5_移动端H5页面踩坑记

    移动端H5页面踩坑记 移动端的样式问题 「1. 安卓 font-weight:700;以上才被认为是加粗.」 「2. border 在 1px 以内是不被安卓识别的一些 0.5px 的下划线怎么搞?」 ...

最新文章

  1. 参考滴滴左右对齐自适应
  2. 【有三说图像】图像简史与基础
  3. 如何做项目工作量估算
  4. “云智一体“全场景智能视频技术与应用解析白皮书下载申请
  5. 古希腊三大数学书(二)
  6. IT行业经典面试题,121套面试题
  7. 这可能是目前最全的Redis高可用技术解决方案总结
  8. 基于SVN的SCM简单总结
  9. dos-usboot-v1124(启动U盘制作工具)
  10. 基于STM32的STM8脱机编程器源码分享
  11. 5.2.1_2 普通心理学(彭冉玲第四版) - 第1章 心理学的研究对象和方法
  12. 如何使用计算机来线性拟合,非线性数据拟合
  13. android intent传文件夹,Android之intent传值篇
  14. thrift/swift/nifty:获取客户端ip的简单方法
  15. 数据包封包APP信息收集
  16. 51单片机的堆栈指针(SP)
  17. Win10 专用字符编辑程序 新增字拷贝到另一台电脑上
  18. 【小强推歌】---法文歌曲下载
  19. 自增ID相同时报错: Database operation expected to affect 1 row(s) but actually affected 2 row(s)...
  20. 在PyCharm 中安装MongoDB库的一系列操作

热门文章

  1. ORACLE PL/SQL 实例精解之第二章 通用编程语言基础
  2. CCF2016.4 - C题
  3. Swift语言实战晋级-第9章 游戏实战-跑酷熊猫-2 创建熊猫类
  4. Asp.net MVC代替php
  5. 解决 vs2010问题 error MSB8008: 指定的平台工具集(v110)未安装或无效
  6. 解决React首屏加载白屏的问题
  7. 快手短视频领域为例的领域数据建设探索
  8. 大神干货:腾讯广告算法大赛亚军女极客生存图鉴
  9. 阿里系 java_阿里系六大开源项目,你知道几个?
  10. jquery for循环_前端基础入门五(掌握jQuery的常用api,实现动态效果)