select美化效果
代码语言:html
所属分类:表单美化
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BFW NEW PAGE</title> <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script> <script type="text/javascript"> bready(function() { use(["jquery.easydropdown", "easydropdown"], function() { }); }); </script> <style> /* --- RESET --- */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{ margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{ display: block; } table{ border-spacing: 0; border-collapse: collapse; } h1,h2,h3,h4,h5,h6{ font-weight: normal; } a{ text-decoration: none; } nav li{ list-style-type: none; display: inline-block; } /* --- DEMO STYLES --- */ body{ font-family: 'Helvetica Neue', arial, sans-serif; color: #333; -webkit-font-smoothing: antialiased; } header{ padding: 15px 0 20px; border-bottom: 1px solid #ddd; } h1,h2,h3{ font-weight: 700; } .just{ text-align: justify; } .just:after{ content: ''; width: 100%; display: inline-block; } .just > *{ display: inline-block; vertical-align: bottom; } .ib{ display: inline-block; } header .wrapper{ padding: 0 30px; } header h1{ font-size: 40px; font-weight: 700; margin-bottom: 8px; } header h2{ font-weight: 400; font-size: 20px; } section{ position: relative; font-size: 0.1px; text-align: justify; } section:after{ content: ''; display: inline-block; width: 100%; } section .wrapper{ padding: 30px; } section h3{ font-size: 20px; margin-bottom: 1em; padding-top: .5em; } section h4{ font-size: 18px; margin-bottom: 1em; font-weight: 300; } .col{ display: inline-block; vertical-align: top; text-align: left; } .col_1{ width: 55%; } .col_2{ width: 45%; max-width: 520px; background: #333; color: #ddd; box-shadow: inset 20px 0 20px -20px rgba(0,0,0,.6); } .col_2 h3, .col_2 strong{ color: #fff; } p, .text li{ font-size: 16px; font-weight: 300; } p.legal{ font-size: 14px; margin-bottom: 0; } .col_2 p, .col_2 .text li{ font-weight: 400; } .btn{ display: inline-block; background: #d24a67; font-weight: 700; font-size: 16px; color: #fff; padding: 10px 12px; margin-bottom: 30px; border-radius: 5px; -webkit-transition: all 150ms ease-in-out; -moz-transition: all 150ms ease-in-out; -ms-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; } .btn.ib{ margin-right: 10px; } .btn:hover, .btn:focus{ background: #fc6767; color: #fff; outline: 0 none; box-shadow: inset 0 0 10px rgba(0,0,0,.2); } p{ line-height: 1.4; margin-bottom: 25px; } p code, li code{ font-size: 15px; background: rgba(255,255,255,.7); color: #333; padding: 2px; border-radius: 1px; } a{ color: #d24a67; } a:hover{ color: #fc6767; } pre{ font-size: 15px; color: #c4ae78; margin: 15px 0 30px; -webkit-font-smoothing: auto; } ul.text{ margin: 0 0 30px 18px; list-style: square; } .text li{ line-height: 1.4; margin-bottom: 12px; } select, .dropdown{ margin-bottom: 30px; display: inline-block; } .dropdown{ margin-right: 8px; } pre.prettyprint{background:#141414;color:#f8f8f8;} pre.prettyprint span.str,pre.prettyprint span.atv{color:#8f9d6a;} pre.prettyprint span.kwd,pre.prettyprint span.pun{color:#cda869;} pre.prettyprint span.com{color:#5f5a60;font-style:italic;} pre.prettyprint span.typ{color:#9b703f;} pre.prettyprint span.lit{color:#cf6a4c;} pre.prettyprint span.pln{color:#7587a6;} pre.prettyprint span.tag{color:#ac885b;} pre.prettyprint span.atn{color:#e0c589;} pre.prettyprint span.dec{color:#494949;} pre.prettyprint{ border: 0 none !important; background: transparent !important; } @media all and (max-width: 1040px){ .col, .col_2, .col_1{ display: block; width: auto; max-width: 100%; background: #fff; color: #333; box-shadow: none; } .col_2 h3, .col_2 strong{ color: #333; } pre.prettyprint{ font-size: 14px; background: #333 !important; padding: 12px !important; border-radius: 5px !important; overflow-x: scroll; } hgroup{ text-align: left; margin-bottom: 10px; } } /* --- DEMO METRO THEME --- */ /* PREFIXED CSS */ .metro, .metro div, .metro li, .metro div::after, .metro .carat, .metro .carat:after, .metro .selected::after, .metro:after{ -webkit-transition: all 150ms ease-in-out; -moz-transition: all 150ms ease-in-out; -ms-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; } .metro .selected::after, .metro.scrollable div::after{ -webkit-pointer-events: none; -moz-pointer-events: none; -ms-pointer-events: none; pointer-events: none; } /* WRAPPER */ .metro{ position: relative; width: 250px; cursor: pointer; margin-bottom: 30px; font-weight: 200; background: #f8f8f8; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .metro.open{ z-index: 2; } .metro:hover{ background: #f4f4f4; } .metro:after{ content: ''; position: absolute; right: 3px; bottom: 3px; top: 2px; width: 30px; background: transparent; } .metro.focus:after{ background: #0180d1; } /* CARAT */ .metro .carat, .metro .carat:after{ content: ''; position: absolute; right: 10px; top: 50%; margin-top: -4px; border: 8px solid transparent; border-top: 8px solid #000; z-index: 2; -webkit-transform-origin: 50% 20%; -moz-transform-origin: 50% 20%; -ms-transform-origin: 50% 20%; transform-origin: 50% 20%; } .metro .carat:after{ margin-top: -10px; right: -8px; border-top-color: #f8f8f8; } .metro:hover .carat:after{ border-top-color: #f4f4f4; } .metro.focus .carat{ border-top-color: #f8f8f8; } .metro.focus .carat:after{ border-top-color: #0180d1; } .metro.open .carat{ -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } /* OLD SELECT (HIDDEN) */ .metro .old{ position: absolute; left: 0; top: 0; height: 0; width: 0; overflow: hidden; } .metro select{ position: absolute; left: 0px; top: 0px; } .metro.touch select{ left: 0; top: 0; width: 100%; height: 100%; opacity: 0; } /* SELECTED FEEDBACK ITEM */ .metro .selected, .metro li{ display: block; font-size: 18px; line-height: 1; color: #000; padding: 9px 12px; overflow: hidden; white-space: nowrap; } .metro .selected::after{ content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 60px; border-radius: 0 2px 2px 0; box-shadow: inset -55px 0 25px -20px #f8f8f8; } .metro:hover .selected::after{ box-shadow: inset -55px 0 25px -20px #f4f4f4; } /* DROP DOWN WRAPPER */ .metro div{ position: absolute; height: 0; left: 0; right: 0; top: 100%; margin-top: -1px; background: #f8f8f8; overflow: hidden; opacity: 0; } .metro:hover div{ background: #f4f4f4; } /* Height is adjusted by JS on open */ .metro.open div{ opacity: 1; z-index: 2; } /* FADE OVERLAY FOR SCROLLING LISTS */ .metro.scrollable div::after{ content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 50px; box-shadow: inset 0 -50px 30px -35px #f8f8f8; } .metro.scrollable:hover div::after{ box-shadow: inset 0 -50px 30px -35px #f4f4f4; } .metro.scrollable.bottom div::after{ opacity: 0; } /* DROP DOWN LIST */ .metro ul{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; list-style: none; overflow: hidden; } .metro.scrollable.open ul{ overflow-y: auto; } /* DROP DOWN LIST ITEMS */ .metro li{ list-style: none; padding: 8px 12px; } /* .focus class is also added on hover */ .metro li.focus{ background: #0180d1; position: relative; z-index: 3; color: #fff; } .metro li.active{ background: #0180d1; color: #fff; } /* --- DEMO FLAT THEME --- */ /* PREFIXED CSS */ .flat, .flat div, .flat li, .flat div::after, .fl.........完整代码请登录后点击上方下载按钮下载查看
网友评论0