正文 

当前位置： 首页 > java > java框架

使用css3的appearance属性改变元素的外观

小菜与小鸟      2022-02-14     260

关键词：

前段时间在《修复iPhone上submit按钮bug》中介绍了使用“-webkit-appearance: none; ”来改变按钮在iPhone下的默认风格，其实我们可以反过来思路，使用“appearance”属性，来改变任何元素的浏览器默认风格，简单的说，你可以使用“appearance”属性将“段落p”渲染成button的风格，也可以渲染成“输入框”、“选择框”等效果。

 

大家都知道每个浏览器对HTML元素渲染都不一样，比如说“button”，在chrome和ff中，渲染出来的效果都是不尽相同的。这样一来就有了今天这个思路，利用浏览器的对元素的默认渲染风格，我们可以使用“appearance”属性对任何元素的渲染风格改变，最简单的来说，我要把“a”链接默认显示成“按钮”风格，那么我们可以使用“appearance”设置为“button”。

“appearance”功能听起来蛮大的，不过可惜的是，目前各个浏览器厂商各自为政，还无法达到统一的标准，至今天也只有两个内核的浏览器可以使用，其一是“webkit”，其二是“ff”的，也就是说在使用“appearances”时，需要加上各浏览器厂前缀。

appearance使用方法：

.elmClass{
   -webkit-appearance: value;
   -moz-appearance:    value;
   appearance:         value;
}

接下来我们一起来看个简单的实例：

<p class="lookLikeAButton">我是一个段落P元素 </p>
<p class="lookLikeAListbox">我是一个段落P元素 </p>
<p class="lookLikeAListitem">我是一个段落P元素 </p>
<p class="lookLikeASearchfield">我是一个段落P元素 </p>
<p class="lookLikeATextarea">我是一个段落P元素 </p>
<p class="lookLikeAMenulist">我是一个段落P元素</p>

接下来，使用“appearance”属性来改变上面“P”元素的风格：

/*看起来像个按钮，以按钮的风格渲染*/
.lookLikeAButton{
     -webkit-appearance:button;
     -moz-appearance:button;
}
/*看起来像个清单盒子，以listbox风格渲染*/
.lookLikeAListbox{
     -webkit-appearance:listbox;
     -moz-appearance:listbox;
}
/*看起来像个清单列表，以listitem风格渲染*/
.lookLikeAListitem{
     -webkit-appearance:listitem;
     -moz-appearance:listitem;
}
/*看起来像个搜索框，以searchfield风格渲染*/
.lookLikeASearchfield{
     -webkit-appearance:searchfield;
     -moz-appearance:searchfield;
}
/*看起来像个文本域，以textarea风格渲染*/
.lookLikeATextarea{
     -webkit-appearance:textarea;
     -moz-appearance:textarea;
}
/*看起来像个下接菜单，以menulist风格渲染*/
.lookLikeAMenulist{
     -webkit-appearance:menulist;
     -moz-appearance:menulist;
}

经过“appearance”的属性值设置后，段落P的默认风格就被改变了，如图所示：

技术分享图片

当然上面的属性只是“appearance”中的一部分，我搜集了一下webkit和Mozilla下的appearance给大家参考：

Webkit下的appearance属性值

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

Mozilla下的appearance属性值

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

大家要是感兴趣的话可以看看下面的相关介绍：

  1. Mozilla Docs for -moz-appearance
  2. Trent Walton on Webkit Appearance
  3. Shaun Inman on Disabling Inner Text Shadow of Text Inputs on iPad
  4. CSS3 Spec
  5. CSS property: -webkit-appearance

最后在提醒大家一回，目前在IE系列和Opera浏览器上不支持“appearance”，而且Safari也只有3.0版本以上支持，而在Chrome和Firefox以及移动设置浏览器上得到较好的支持。如果大家对此感兴趣，自己可以私下一个下个尝试上面的属性值，给大家带来何种效果。

如需转载，烦请注明出处：http://www.w3cplus.com/css3/changing-appearance-of-element-with-css3.html

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: https://www.w3cplus.com/css3/changing-appearance-of-element-with-css3.html ? w3cplus.com



改变表单元素的外观

ie10以下不支持使用appearance改变webkit浏览器的默认外观webkit内核浏览器具备私有属性"-webkit-appearance"可以改变元素的外观，该属性非常强大，适合大部分标签，这对于webkit的页面优化带来极大的帮助。禁用表单input、select元素的默... 查看详情

css3骚样式补充

...换元素还能改变其Z轴。必须与 transform 属性一同使用，不然不会有任何效果。 1、x-axis（以y轴为旋转中心时，元素（y轴）在x轴上的位置）定义视图被置于X轴的何处。可能的值：leftcenterrightlength%2、y-axis（以x轴为旋转... 查看详情

css3使用filter属性实现改变svg图标颜色

...色后，在列表页面展示色值改后的svg图标。3.解决方案：使用filter属性中的 drop-shadow，drop-shadow滤镜可以给元素或图片非透明区域添加投影。css:.con-right-iocn-img{display:inline-block;width:34px;height:34px;overflow:hid 查看详情

常用css3属性

 总结一下在工作用常用到的属性设置1.设置文本的可选择性-webkit-user-select:none/text 2.设置背景的绘制区域background-clip:border-box/padding-box/content-box 3.使元素看起来像标准的button-webkit-appearance:button 4.去掉type为number类 查看详情

css3中的transition

...准中对CSS3的transition是这样描述的：CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击，获得焦点，被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。简洁点说就是当元... 查看详情

过渡效果

...的属性值在一定的时间区间内平滑地过渡。我们可以在不使用Flash动画或JavaScript的情况下，在元素从一种样式变换为另一种样式时为元素添加效果。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑... 查看详情

day5

...把效果添加到哪个CSS属性上规定效果的时长配合hover效果使用（触发）如果时长未规定，则不会有过渡效果，因为默认值是0。效果开始于指定的CSS属性改变值时。CSS属性改变的典型时间是鼠标指针位于元素上时：例：div{transition:... 查看详情

css3_transition学习笔记

...中对css3的transition这是样描述的：“css的transition允许css的属性值在一定的时间区间内平滑地过渡。 　　这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。” 　　简单... 查看详情

改变盒子模型外边距的是

...之间的距离，包括上、下、左、右四个方向的距离，可以使用像素值、百分比或者em等单位。例如，设置一个元素的Margin属性为“margin:10px20px30px40px;”，表示该元素在顶部、右侧、底部和左侧分别有10像素、20像素、30像素和40像... 查看详情

css3的动画属性

transition、animation和transform是CSS3中三个制作动画的重要属性，本篇文章主要对其进行学习了解。 一、transitiontransition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任... 查看详情

css3过渡

通过CSS3，我们可以在不使用Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。注释：Chrome25以及更早的版本，需要前缀-webkit-。它如何工作？CSS3过渡是元素从一种样式逐渐改变为另一种的效果... 查看详情

css3属性

...用att表示的属性的值中包含用val指定的字符，那么该元素使用这个样式。[att^=val]属性选择器如果用att表示的属性值的开头字符为用val指定的字符的话，那么该元素使用这个值[att$=val]属性选择器如果元素用att表示的属性的属性值... 查看详情

怎样改变checkbox的默认蓝色

参考技术A可以使用CSS来改变checkbox的默认外观。CSS属性input[type="checkbox"]background-color:#FFFFFF;可以将checkbox的颜色改变为白色。 参考技术B可以使用以下方法改变checkbox的默认蓝色：1.使用CSS的伪类选择器来改变checkbox的样式... 查看详情

怎么完全用css3使一个的元素做流畅的弧线运动？

...transform：rotate同时设置transform：translate() rotate()。再使用动画，让这个属性平均的变换就可以了 参考技术B在html5+css3中做到动态效果有4种方式：1.transition(过渡)-通过属性值的变化来平滑过渡产生动画；2.ani 查看详情

使用css3的box-sizing属性设置元素大小包含border与padding

...或高度，是不会包含元素的边框和内边距的，这是就需要使用box-sizing属性设置该元素。 ? box-sizing是CSS3的属性，可以设置以上值：1.  content-box:元素size不包含border和padding，默认值。2.  border-box:元素size包 查看详情

八css3中的动画功能

...来介绍下这两种功能。1、Transitions功能1.1Transitions功能的使用方法CSS3中，Transitions功能通过将元素的某个属性从一个属性值在指定时间内平滑过渡到另一个属性值来实现动画功能，使用方法如下：transition：属性名过 查看详情

第12章用户界面与其它重要属性(代码片段)

...来修改元素的尺寸来改变元素的大小。到目前为止，可以使用overflow属性的任何容器元素。在此之前，Web设计师为了要实现这样具有拖动效果的UI，使用大量的脚本代码才能实现，这样费时费力，效率极低。resize属性主要是用来... 查看详情

css3常用操作

对齐操作　　使用margin属性进行水平对齐　　使用position属性进行左右对齐　　使用float属性进行左右对齐尺寸操作的属性　　height设置元素高度　　line-height设置行高　　max-height设置元素最大高度　　max-width设置元素最大宽度... 查看详情