博客
关于我
CSS3 appearance大全鉴赏以及是否影响box-sizing
阅读量:388 次
发布时间:2019-03-05

本文共 3462 字,大约阅读时间需要 11 分钟。

一、CSS3 appearance改变元素外观

之前写过一篇很实用也很全面的文章:“”,里面就大量出现了CSS3 appearance的使用,主要是重置HTML5表单元素浏览器内置的一些UI。例如:

去掉date类型<input>框的叉叉:

::-webkit-clear-button {     -webkit-appearance: none; }

去掉number类型<input>框的上下箭头:

::-webkit-inner-spin-button {     -webkit-appearance: none;    /* 上下小箭头按钮,你丫太丑了,滚粗,负分 */}

去掉search类型<input>框的N多特征:

/* 去除圆角 */input[type=search] { -webkit-appearance: none; }/* 隐藏取消按钮 */::-webkit-search-cancel-button { -webkit-appearance: none; }/* 隐藏放大镜 */::-webkit-search-results-button { -webkit-appearance: none; }

等等。

兼容性

撇开IE不谈,appearance的兼容性其实已经很不错了,移动端可以愉快地使用,不过离不开-webkit-moz-私有前缀。

appearance的兼容性

仔细观察会发现IE13也支持,不过,根据上的提示,IE13+以及IE mobile使用的是-webkit-而不是-ms-!我顿时恍惚了,怎么突然出现请情敌到家里吃饭的剧情了?之前支付宝不支持window phone时候的口水仗听说过IE的这种做法,据说是被开发者逼的,今天终于逮着个活的。

其他

虽然说,实际开发时候,我们用的最多的是使用-webkit-appearance:none干掉浏览器默认丑陋的UI,但是,从功能上讲,appearance还可以把普通元素变成特殊元素,或者A元素变成B元素的样子。

例如,一个普通的span标签,然后:

span { -webkit-appearance:button; -moz-appearance:button; }

就会变成按钮模样,例如下面截图(win-chrome, win-firefox):

Chrome下按钮 firefox按钮

实时效果如下:

button

二、CSS3 appearance其他用途

除了改变元素的UI,CSS3 appearance还有其他用途,什么用途呢?说出来不要笑,判断是否是是webkit浏览器……本来我想这么写的!然后瞬间发现自己傻逼了,卧槽,新出的IE13,IE14也是使用的-webkit私有前缀,虽然身边没有设备无法测试,但是,按照以往的尿性,怕是下面的JS要悲剧了:

var isWebkit = 'WebkitAppearance' in document.documentElement.style;

这就是随便请情敌到家里吃饭的后果,看来只能先用下面这个老方法顶着:

var isWebkit = typeof document.webkitHidden != "undefined";

本节就当我没说过~~

三、CSS3 appearance大全鉴赏

你知道webkit和moz支持的appearance属性值有多少吗?足足有一卡车那么多!

webkit浏览器下:

["checkbox", "radio", "push-button", "square-button", "button", "button-bevel", "listbox", "listitem", "menulist", "menulist-button", "menulist-text", "menulist-textfield", "scrollbarbutton-up", "scrollbarbutton-down", "scrollbarbutton-left", "scrollbarbutton-right", "scrollbartrack-horizontal", "scrollbartrack-vertical", "scrollbarthumb-horizontal", "scrollbarthumb-vertical", "scrollbargripper-horizontal", "scrollbargripper-vertical", "slider-horizontal", "slider-vertical", "sliderthumb-horizontal", "sliderthumb-vertical", "caret", "searchfield", "searchfield-decoration", "searchfield-results-decoration", "searchfield-results-button", "searchfield-cancel-button", "textfield", "textarea"]

moz浏览器下:

["none", "button", "checkbox", "checkbox-container", "checkbox-small", "dialog", "listbox", "menuitem", "menulist", "menulist-button", "menulist-textfield", "menupopup", "progressbar", "radio", "radio-container", "radio-small", "resizer", "scrollbar", "scrollbarbutton-down", "scrollbarbutton-left", "scrollbarbutton-right", "scrollbarbutton-up", "scrollbartrack-horizontal", "scrollbartrack-vertical", "separator", "statusbar", "tab", "tab-left-edge Obsolete", "tabpanels", "textfield", "textfield-multiline", "toolbar", "toolbarbutton", "toolbox", "-moz-mac-unified-toolbar", "-moz-win-borderless-glass", "-moz-win-browsertabbar-toolbox", "-moz-win-communications-toolbox", "-moz-win-glass", "-moz-win-media-toolbox", "tooltip", "treeheadercell", "treeheadersortarrow", "treeitem", "treetwisty", "treetwistyopen", "treeview", "window"]

为了让大伙儿一下子知道各个值究竟会表现成什么样子,我特意整个了鉴赏大全页面。若有兴趣,您可以狠狠地点击这里:

我使用了选框勾勒了元素的轮廓,这样容易分别。结果,webkit下(不同操作系统UI不一样):

webkit appearence效果大全

moz appearance效果大全

四、appearance是否影响box-sizing?

这是我自己抛出的一个疑问?

比方说一个search类型<input>框,其box-sizingborder-box,而text类型的普通<input>框的box-sizingcontent-box

假如说,我通过appearancetext类型输入框变成search类型的模样,那么盒模型,也就是box-sizing是不是也跟着一起变呢?

这种问题,写个demo测试下就可以了,若有兴趣,您可以狠狠地点击这里:

结果,点击按钮后,元素的高度并没有变化(如下截图):

box-sizing没有变化

这说明,appearance可以影响外观,但是不影响box-sizingbox-sizing是由type属性值决定的。

五、结束语

刚想到了个点,可以分享的。后来刷了一圈微博,怎么也想不起来,好痛苦,怎么办? 

这比大鱼已经拖上岸结果还跑了还要难受……

难受……

难……

受……

转载地址:http://hepwz.baihongyu.com/

你可能感兴趣的文章
MySQL 添加索引,删除索引及其用法
查看>>
mysql 状态检查,备份,修复
查看>>
MySQL 用 limit 为什么会影响性能?
查看>>
MySQL 用 limit 为什么会影响性能?有什么优化方案?
查看>>
MySQL 用户权限管理:授权、撤销、密码更新和用户删除(图文解析)
查看>>
mysql 用户管理和权限设置
查看>>
MySQL 的 varchar 水真的太深了!
查看>>
mysql 的GROUP_CONCAT函数的使用(group_by 如何显示分组之前的数据)
查看>>
MySQL 的instr函数
查看>>
MySQL 的mysql_secure_installation安全脚本执行过程介绍
查看>>
MySQL 的Rename Table语句
查看>>
MySQL 的全局锁、表锁和行锁
查看>>
mysql 的存储引擎介绍
查看>>
MySQL 的存储引擎有哪些?为什么常用InnoDB?
查看>>
Mysql 知识回顾总结-索引
查看>>
Mysql 笔记
查看>>
MySQL 精选 60 道面试题(含答案)
查看>>
mysql 索引
查看>>
MySQL 索引失效的 15 种场景!
查看>>
MySQL 索引深入解析及优化策略
查看>>