zoukankan      html  css  js  c++  java
  • 使用CSS3的appearance属性改变元素的外观

    “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”中的一部分,我搜集了一下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

    摘录{前端开发}
  • 相关阅读:
    219. Contains Duplicate II
    189. Rotate Array
    169. Majority Element
    122. Best Time to Buy and Sell Stock II
    121. Best Time to Buy and Sell Stock
    119. Pascal's Triangle II
    118. Pascal's Triangle
    88. Merge Sorted Array
    53. Maximum Subarray
    CodeForces 359D Pair of Numbers (暴力)
  • 原文地址:https://www.cnblogs.com/yongwang/p/6594614.html
Copyright © 2011-2022 走看看