-webkit-appearance:none

最新推荐文章于 2024-05-05 14:46:48 发布
最新推荐文章于 2024-05-05 14:46:48 发布
阅读量1.5k 收藏 2
点赞数
分类专栏： 其他汇总 文章标签： appearance
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gxf_ming/article/details/73162237
版权

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

-webkit-appearance:push-button是将按钮设置成IOS中默认原生控件的样式.


当我们需要移除原生控件样式时:-webkit-appearance:none,这样就去掉了原生的样式,可以自己更改按钮的样式,

需要注意的是:ios下的按钮这样设置之后,还是有圆角的,这时需要再用border-radius再去设置.

gxf_style
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css中使用“-webkit-appearance: none;”去除系统默认appearance的样式引发的问题
csx blog
01-19 1万+
解决网站bug时，发现一个棘手的问题：的复选框选中了没有打钩，经排查，是由于css中“-webkit-appearance: none;”导致的，改成“-webkit-appearance: checkbox”后恢复正常。查询资料：总结如下：   1.-webkit-appearance的说明：          改变按钮和其他控件的外观，使其类似于原生控件。 -webkit-appea
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:
深入探索CSS3 appearance 属性：解锁原生控件的定制秘密
最新发布
艾恩小灰灰的博客
05-05 584
CSS3 的appearance属性是网页设计中一个不可忽视的宝藏，它不仅让我们有能力去除那些不甚如意的默认样式，更赋予了我们无限的创意空间，去打造既美观又实用的用户界面。通过上述详尽的解析与实例，希望能帮助你更好地掌握这一属性，让你的网页设计之旅更加丰富多彩。
-webkit-appearance 使用说明
csl125的博客
08-08 9756
前段时间在《修复iPhone上submit按钮bug》中介绍了使用“-webkit-appearance: none; ”来改变按钮在iPhone下的默认风格，其实我们可以反过来思路，使用“appearance”属性，来改变任何元素的浏览器默认风格，简单的说，你可以使用“appearance”属性将“段落p”渲染成button的风格，也可以渲染成“输入框”、“选择框”等效果。 大家都知道每个浏览...
-webkit-appearance:none;
jjsnc
06-07 505
去除checkbox radio 默认样式-webkit-appearance:none;
-webkit-appearance: none;
weixin_30548917的博客
03-20 354
今天在web群里聊天的时候，发现了这个东东，我好像不怎么认识他，于是查了下关于他的信息： 抄的例子, ----------- IOS环境下的按钮都是经过美化的，但通常我们在设计web app的时候不需要这些看上去老土的样式，所以，去除这些显得很有必要。 下面这句代码就是重置这些样式的： -webkit-appearance: none; 通常，我们在写移动端的web开发时，会...
checkbox不显示，试试去掉-webkit-appearance这个样式
JackieDYH的博客
03-11 548
自用的reset.css中加入了 -webkit-appearance: none;其他所有表单没有出现问题，但checkbox会不显示 说明： 改变按钮和其他控件的外观，使其类似于原生控件。 -webkit-appearance 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。 此属性非标准且渲染效果在不同浏览器下不同，...
PHero-Assignment-6：滑块调试
02-15
-webkit-appearance: none; /* 针对Safari 和 Chrome */ appearance: none; margin: 10px 0; outline: none; cursor: pointer; } #slider::-webkit-slider-thumb { -webkit-appearance: none; /* 针对Safari...
使用CSS3的appearance属性改变元素的外观的方法
12-13
前段时间在《修复iPhone上submit按钮bug》中介绍了使用“-webkit-appearance: none; ”来改变按钮在iPhone下的默认风格，其实我们可以反过来思路，使用“appearance”属性，来改变任何元素的浏览器默认风格，简单的...
谷歌和safari webkit独有css hack
04-16
7. `-webkit-appearance: none;`：可以用来去掉WebKit浏览器中某些元素的默认样式，如按钮、输入框等。 在实际开发中，使用这些WebKit特有的CSS Hack时需要注意，虽然它们能解决当前浏览器的兼容性问题，但可能会...
slider-design
05-29
-webkit-appearance: none; /* 避免默认样式 */ width: 100%; height: 10px; background: #d3d3d3; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20...
前端-图像明暗切换-滑块控制
06-24
-webkit-appearance: none; /* 移除默认样式 */ width: 100%; height: 10px; background: #d3d3d3; outline: none; opacity: 0.7; -webkit-transition: .2s; transition: opacity .2s; } #brightness-...
CSS3 appearance 属性
liguangda的博客
02-01 450
1.appearance属性 为none去除该标签的默认样式，保留其原有功能 例如： div{ appearance:none; -moz-appearance:none; -webkit-appearance:none; } 让div看上去像一个button div { appearance:button; -moz-appearance:button; /* Firefox */ -webkit-appearance:button; /* Safari and
css中appearance:none修改select option样式
lianflower的博客
08-27 1623
https://www.xinran001.com/frontend/145.html select option有浏览器默认样式，且对自己的样式有一定的保护（基于css规则）。 这个保护就是appearance属性，浏览器内置的css样式是不允许更改的，日常开发仅是在它的样式基础上覆盖而已。 然而当设置 appearance: none 的时候，就相当于让select元素脱离浏览器内置select样式了。此时它相当于一个div，开发者就可以灵活设置样式了。 ...
6款漂亮HTML CSS样式用户留言表单
热门推荐
Nemo的笔记本
04-11 7万+
如今我们的网站、页面更加需要注重细节，不论是字体的样式、还是图片的分辨率清晰度都会影响到用户的访问体验和PV，以及用户以后是否会回访我们的网站/博客。如果有时间的时候，老左也会浏览和阅读相关的前端网站和积累一些不错的前端资源，在"8款设计师常用漂亮的HTML CSS表格样式"中展示了几款不错的价格列表，在这篇文章中整理6个用户留言HTML CSS样式。标记首先我们要在网页中加上常用的几个标签文本，......
-webkit-touch-callout: none；禁止ios弹出菜单，长按图片保存到手机时
cd13849109771的博客
10-25 2133
-webkit-touch-callout: none;禁止ios弹出菜单，长按图片保存到手机时 有一个需求就是h5页面中，长按二维码图片，保存到手机；在ios上经常长按会弹出ios的菜单，而无法每次都能够进行保存到手机的操作。真是超级烦啊！！！ 解决办法：给图片img添加-webkit-touch-callout: none; img{ width: 100%; -webkit-touch-callout: none; } ...
倾力总结40条常见的移动端Web页面问题解决方案
weixin_34109408的博客
05-30 3223
原文链接：http://mp.weixin.qq.com/s?__biz=MzAwNjI5MTYyMw==&mid=2651493053&idx=1&sn=8409bc267cd73229425a915f27f6a27f&scene=0#wechat_redirect 1.安卓浏览器看背景图片，有些设备会模糊。 用同等比例的图片在PC机上很清楚，但是手机上很...
-webkit-appearance —— webkit外观样式属性
PHP游刃者的专栏
07-15 562
发表于 2014年12月15日 by 愚人码头 被浏览 4,166 次 -webkit-appearance 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。 最近认真看了一下文档，-webkit-appearance是用来改变按钮和其他控件的外观，使其外观类似于原生控件。 关于这个属性以前写过
html入门moz a,html - -moz-appearance:none still displays a checkbox - Stack Overflow
weixin_42504327的博客
06-20 312
Below is a solution I came up with that sniffs out Firefox and uses an extra element to create an illusion.The trick is to place the input above the extra element and then give the input an opacity of...
全局给input元素设置了-webkit-appearance：none属性，怎么在局部完全去掉-webkit-appearance属性
07-12
如果你在全局样式中设置了 `input` 元素的 `-webkit-appearance` 属性为 `none`，并且希望在局部样式中完全去掉 `-webkit-appearance` 属性，你可以使用 `initial` 关键字。 例如，假设你的全局样式中设置了 `input...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值