css：appearance:none;

最新推荐文章于 2023-03-25 09:48:40 发布
最新推荐文章于 2023-03-25 09:48:40 发布
阅读量781 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aamen1109/article/details/50001741
版权

appearance:none;

-moz-appearance:none; /* Firefox */

-webkit-appearance:none; /* Safari 和 Chrome */

在移动端，h5页面中，经常会需要使用手机自带的原生select控件，此为清除默认样式代码，在苹果和安卓手机都测过，好用

aamen1109
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用CSS3的appearance属性改变任何元素的浏览器默认风格
12-13
前段时间在《修复iPhone上submit按钮bug》中介绍了使用“-webkit-appearance: none; ”来改变按钮在iPhone下的默认风格，其实我们可以反过来思路，使用“appearance”属性，来改变任何元素的浏览器默认风格，简单的说，你可以使用“appearance”属性将“段落p”渲染成button的风格，也可以渲染成“输入框”、“选择框”等效果。 大家都知道每个浏览器对HTML元素渲染都不一样，比如说“button”，在chrome和ff中，渲染出来的效果都是不尽相同的。这样一来就有了今天这个思路，利用浏览器的对元素的默认渲染风格，我们可以使用“appearan
使用CSS3的appearance属性改变元素的外观的方法
12-13
前段时间在《修复iPhone上submit按钮bug》中介绍了使用“-webkit-appearance: none; ”来改变按钮在iPhone下的默认风格，其实我们可以反过来思路，使用“appearance”属性，来改变任何元素的浏览器默认风格，简单的...
CSS原生修改select 样式，实现下拉三角括号
ygwang2010的博客
05-06 4287
html select 样式css修改。满足设计要求的样式
常用css样式汇总
m0_62048699的博客
04-07 144
公用css以及css常用样式汇总
css当中appearance: none；border: none；outline: none；的区别
jjw_zyfx的博客
03-25 501
css当中appearance: none;border: none;outline: none;的区别
appearance: none;的使用
zzgzzg00的专栏
10-07 8529
    在知乎上看到一个问题，为什么前端开发总喜欢用div代替语意更好的button按钮来实现button，原因无非是各个浏览器的button丑且样式不一致，所以干脆用div模拟反而要比修改button的默认样式反而更便捷。     其实一直有一个非标准的css而且兼容还出奇的好的属性--ie无视，能够在某种程度上缓解这种矛盾，就是  -webkit-appearance: none;（这里...
CSS重置样式和公共样式
liwenhui的博客
06-29 243
有时候需要写几个简单的活动页面，但是浏览器的默认样式并不是我们想要的，各个浏览器的样式还都不一样；这时候就需要对样式进行重置，写一些公共的样式，来兼容各个浏览器的默认样式了。以下是一些参考： @charset 'utf-8'; html{color:#333;background:#eee;font-family:Arial,'Microsoft Yahei';} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,le
CSS3 appearance 属性
liguangda的博客
02-01 413
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：关于“-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:
css中使用“-webkit-appearance: none;”去除系统默认appearance的样式引发的问题
csx blog
01-19 1万+
解决网站bug时，发现一个棘手的问题：的复选框选中了没有打钩，经排查，是由于css中“-webkit-appearance: none;”导致的，改成“-webkit-appearance: checkbox”后恢复正常。查询资料：总结如下：   1.-webkit-appearance的说明：          改变按钮和其他控件的外观，使其类似于原生控件。 -webkit-appea
stylus-appearance
06-21
手写笔外观用法 @import "stylus-appearance";appearance(none);
BleuFear:带有狂野电蓝色条纹的深色主题
06-23
Faenza-Darkest GNOME-shell： 肉桂主题：薄荷色要修复文本输入在 Firefox 中不呈现暗的问题，请将其添加到~/.mozilla/firefox/$PROFILEDIR/chrome/userContent.css ： input {-moz-appearance: none !important;...
CSS怎么去掉select的下拉箭头样式
12-13
废话不多说了，直接给大家贴css代码了，具体代码如下所示： CSS Code复制内容到剪贴板 ... appearance:none; -moz-appearance:none; -webkit-appearance:none; /*在选择框的最右侧中间显示小箭头图片*/ 
css中appearance:none修改select option样式
lianflower的博客
08-27 1581
https://www.xinran001.com/frontend/145.html select option有浏览器默认样式，且对自己的样式有一定的保护（基于css规则）。 这个保护就是appearance属性，浏览器内置的css样式是不允许更改的，日常开发仅是在它的样式基础上覆盖而已。 然而当设置 appearance: none 的时候，就相当于让select元素脱离浏览器内置select样式了。此时它相当于一个div，开发者就可以灵活设置样式了。 ...
去除select边框和三角-----appearance:none
Bright2017的博客
06-24 3834
隐藏select边框
CSS：关于 input 框 “-webkit-appearance: none”样式使用问题
Be myself
09-03 5234
场景:在开发微商城的时候,经常会遇到ios端和安卓端的样式显示不一样,例如同一按钮(样式一样)会显示不一样的颜色,导致项目整体的搭配不是很好.在网上搜索了一番后,发现css样式:-webkit-appearance: none,就可以去除浏览器默认样式. ul, li, dl, dt, dd, form, h1, h2, h3, h4, p, input, form { margin: 0p...
-webkit-appearance:none 在input控件上的设置体现
Candy_10181的博客
05-30 7632
通常，IOS环境下的按钮都是经过美化的，但通常我们在设计web app的时候不需要这些看上去老土的样式，所以，去除这些显得很有必要。-----------------------------------------------------------------------------------------------------------------------------------下面这...
uniapp中uni-radio { appearance: none; }不生效是为什么？
最新发布
05-28
可能的原因有以下几点： 1. 样式优先级不够高 如果在样式中设置了多个规则，可能存在优先级冲突的情况。可以使用浏览器的开发者工具查看元素的样式规则，看是否被其它规则覆盖了。可以通过增加样式规则的权重或使用 `!important` 声明来提高该样式的优先级。 2. 组件使用了slot插槽 如果 `uni-radio` 组件使用了 slot 插槽，可能会影响样式规则的生效。可以在插槽内部添加一个 `<div>` 元素，然后在该元素上应用样式规则，如下所示： ```html <uni-radio> <div class="my-radio"> <span class="my-radio-icon"></span> <span class="my-radio-label">选项1</span> </div> </uni-radio> ``` ```css .my-radio .my-radio-icon { /* 取消默认样式 */ appearance: none; -webkit-appearance: none; -moz-appearance: none; /* 自定义样式 */ width: 20px; height: 20px; border: 1px solid #ccc; border-radius: 50%; outline: none; cursor: pointer; } .my-radio .my-radio-icon:after { /* 选中样式 */ content: "\2713"; display: none; color: #fff; background-color: #007aff; border-radius: 50%; width: 16px; height: 16px; line-height: 16px; text-align: center; font-size: 12px; margin: 2px; } .my-radio input[type="radio"]:checked + .my-radio-icon:after { display: block; } ``` 3. 被父元素的样式规则覆盖 如果 `uni-radio` 组件被包含在其它元素中，可能会受到父元素的样式规则影响。可以通过设置 `uni-radio` 组件的 `class` 属性，来应用自定义样式规则。 如果仍然无法解决问题，可以提供更多的代码和详细的描述，以便更好地帮助你解决问题。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值