ios input样式无法修改的坑(-webkit-appearance: none;)

最新推荐文章于 2021-02-04 13:08:34 发布

weixin_43817197

最新推荐文章于 2021-02-04 13:08:34 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/weixin_43817197/article/details/91970704

css 专栏收录该内容

3 篇文章

订阅专栏

开发过程中遇到这样的问题,input按钮和日期控件…的样式在ios手机上无法被修改.

-webkit-appearance 是改变按钮和其他控件的外观, 使其类似于原生控件.

-webkit-appearance: none; 去除系统默认appearance的样式,常用于IOS下移除原生样式

坑重现:
css:

  <style>
    .demo {
      /* -webkit-appearance: none; */
      width: 300px;
      height: 50px;
      background: #ff0369;
    }
  </style>

html:

<body>
  <br />
  <input class="demo" type="date">
  <br />
  <br />
  <input class="demo" type="button" value="爱卡卡">
</body>

在这里插入图片描述
填坑:

完成效果:

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_43817197

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

CSS中的appearance属性：重置默认外观以统一设计语言

weixin_41455464的博客

06-23

637

appearance通过今天的讲座，相信大家对appearance属性有了更深入的了解。它不仅可以帮助我们移除浏览器和操作系统的默认样式，还能让我们更容易地实现跨平台一致的设计语言。无论是简单的按钮，还是复杂的表单控件，appearance都能为我们提供强大的支持。当然，appearance并不是万能的，它也有一些局限性，特别是在一些老旧浏览器中。因此，在实际项目中，我们还需要结合其他CSS属性和浏览器前缀，确保我们的设计能够在尽可能多的设备上正常显示。最后，希望大家在未来的项目中能够善加利用。

HTML讲解

codepony的博客

07-27

790

1.html5的新特性文件类型声明（<!DOCTYPE>）仅有一型：<!DOCTYPE HTML>。新的解析顺序：不再基于SGML。绘画 canvas; 用于媒介回放的 video 和 audio 元素; 语意化更好的内容元素:article、footer、header、nav、section; 表单控件:calendar、date、time、email、url、search; input元素的新类型：date, email, url等。新的技术: webworker, w

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

css中使用“-webkit-appearance: none;”去除系统默认appearance的样式引发的问题

csx blog

01-19

1万+

解决网站bug时，发现一个棘手的问题：的复选框选中了没有打钩，经排查，是由于css中“-webkit-appearance: none;”导致的，改成“-webkit-appearance: checkbox”后恢复正常。查询资料：总结如下： 1.-webkit-appearance的说明：改变按钮和其他控件的外观，使其类似于原生控件。 -webkit-appea

-webkit-appearance: none;

weixin_30548917的博客

03-20

430

今天在web群里聊天的时候，发现了这个东东，我好像不怎么认识他，于是查了下关于他的信息：抄的例子, ----------- IOS环境下的按钮都是经过美化的，但通常我们在设计web app的时候不需要这些看上去老土的样式，所以，去除这些显得很有必要。下面这句代码就是重置这些样式的： -webkit-appearance: none; 通常，我们在写移动端的web开发时，会...

-webkit-appearance:none

gxf_ming的博客

06-13

1792

-webkit-appearance用来改变按钮和其他控件的外观,使其外观类似于原生控件. -webkit-appearance:push-button是将按钮设置成IOS中默认原生控件的样式. 当我们需要移除原生控件样式时:-webkit-appearance:none,这样就去掉了原生的样式,可以自己更改按钮的样式, 需要注意的是:ios下的按钮这样设置之后,还是有圆角的,这时需

Bug笔记：-webkit-appearance:none导致无法获取checkbox值

前端乱谈

01-17

6069

这个BUG发生的背景有点复杂。大概就是一个Form表单，要用Validation Plugin验证，Ajax提交。结果发现在Webkit浏览器下无论怎样都阻止这个form在提交的时候刷新整个页面。最后总算抓到元凶是checkbox上的-webkit-appearance:none属性。 -webkit-appearance会将webkit浏览器中的元素默认样式去除。checkbox在

-webkit-appearance: none解决ios样式的的不一性

weixin_39818813的博客

05-04

3531

先上代码：下面这个按钮其实在安卓和ios平台的显示效果是不一样的解释：-webkit-appearance属性拓展改变按钮和其他控件的外观，使其类似于原生控件。-webkit-appearance 是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。此属性非标准且渲染效果在不同浏览器下不同，有些属性值甚至不支...

-webkit-appearance:none 在input控件上的设置体现

Candy_10181的博客

05-30

7738

通常，IOS环境下的按钮都是经过美化的，但通常我们在设计web app的时候不需要这些看上去老土的样式，所以，去除这些显得很有必要。-----------------------------------------------------------------------------------------------------------------------------------下面这...

ios输入框（input）背景色为白色无法去除.pdf

12-16

iOS输入框背景色为白色无法去除的问题是由于iOS高版本的输入框默认背景色为白色，且radius也继承了外面div的样式所致。在iOS中，background的transparent属性是无效的，因此在安卓中看似正常的但在iOS高版本手机中会...

一些鲜为人知的的CSS3属性

02-04

941

webkit-tap-highlight-color 这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过JavaScript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。要重设这个表现，你可以设置-webkit-tap-highlight-color为任何颜色。想要禁用这个高亮，设置颜色的alpha值为0即可。示例：设置高亮色为50%透明的红色: -webkit-tap-highlight-color: rgba(255,0,0,0.5); 浏览器支持: 只有iO

详解移动端HTML5页面端去掉input输入框的白色背景和边框（兼容Android和ios）

12-14

`appearance`属性允许我们改变元素的默认外观，设置为`none`可以去除浏览器默认的UI样式。由于`appearance`不是所有浏览器都支持的标准属性，所以还添加了 `-moz-appearance` 和 `-webkit-appearance` 的前缀，以...

-webkit-appearance:none;

jjsnc

06-07

560

去除checkbox radio 默认样式-webkit-appearance:none;

-webkit-appearance问题

ly2983068126的博客

11-02

1749

当我们写移动端样式时，会发现有些样式在苹果手机里，显示不一样。今天我们来说说-webkit-appearance。在不同的“-webkit-appearance”选值情况下，button所渲染的效果是不一样的，详细的测试代码大家可使用safari浏览器点击这里。有关于“-webkit-appearance”的详细介绍，这回算是知道了，最后我建议大家，我们可以直接在“reset.css

CSS：关于“-webkit-appearance: none”样式使用问题

热门推荐

LIGHT的博客

11-18

4万+

场景:在开发微商城的时候,经常会遇到ios端和安卓端的样式显示不一样,例如同一按钮(样式一样)会显示不一样的颜色,导致项目整体的搭配不是很好.在网上搜索了一番后,发现css样式:-webkit-appearance: none,就可以去除浏览器默认样式. ul, li, dl, dt, dd, form, h1, h2, h3, h4, p, input, form { margin:

webkit引擎的浏览器取消默认样式：-webkit-appearance:none

寒风问雪的专栏

12-13

1121

在写样式的时候，iphone会有一些默认样式，比如背景竟然是比较灰，并不黑。使用-webkit-appearance:none可去除系统默认的样式关于-webkit的一些介绍：转载自：http://www.playgoogle.com/post/61.html WebKit是Mac OS X v10.3及以上版本所包含的软件框架（对v10.2.7及以上版本也可通过

appearance: none;的使用

qq_45723045的博客

11-11

1160

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。本文链接：https://blog.youkuaiyun.com/zzgzzg00/article/details/82956206 在知乎上看到一个问题，为什么前端开发总喜欢用div代替语意更好的button按钮来实现button，原因无非是各个浏览器的button丑且样式不一致，所以干脆用di...

CSS：关于“-webkit-appearance: none”样式使用问题（转）

weixin_34326429的博客

11-21

220

2019独角兽企业重金招聘Python工程师标准>>> ...

针对webkit的HTML, CSS和Javascript

weixin_30885111的博客

03-08

167

HTML, 从HTML文档的开始到结束排列: <meta name=”viewport” content=”width=device-width, initial-scale=1.0″/> 让内容的宽度自适应为设备的宽度, 在做Mobile Web时必须加的一条 <meta name=”format-detection” content=”telephone=no”]]&gt...

<el-input v-model="apiNums" type="number" :max="10000000" />怎么去掉输入框内的箭头

05-24

你可以通过设置CSS样式来隐藏输入框内的箭头，可以在`<style>`标签中添加以下代码： ``` input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; } ``` 这个样式代码可以去掉输入框内的箭头，并且在Webkit浏览器中有效。然后将`<el-input>`组件中的type属性设置为"tel"，以确保在iOS设备上也能正常工作（在iOS设备上，type为"number"的输入框会弹出数字键盘，并且没有完成按钮）。 ``` <el-input v-model="apiNums" type="tel" :max="10000000" /> ```