不斷更新中

預覽

---

這是一個正在完善的css文件，是對原生組件基于標簽屬性做了美化，對datepicker,select等無法用css實現的暫不考慮在本文內。

---

按鈕 Button

初始按鈕

<button>button</button><button class="red">red</button><button class="orange">orange</button><button class="blue">blue</button><button class="green">green</button><button class="link">link</button>

描邊按鈕

<button class="b-red bk-n">button</button><button class="b-red">red</button><button class="b-orange">orange</button><button class="b-blue">blue</button><button class="b-green">green</button>

禁用按鈕

<button disabled>disabled</button>

上浮按鈕

<button class="circle">+</button><button class="circle teal">+</button>

按鈕組

<nav class="btn-group"><button>button</button><button>button</button><button>button</button></nav>

表單Form

文本輸入

<input type="text"> <input type="password" >

開關

<input type="checkbox" id="switch1" class="switch"><label for="switch1"></label>

單選

<input type="radio" id="test_radio1" name="ra"><label for="test_radio1">radio1</label> <input type="radio" disabled id="test_radio3" name="ra"><label for="test_radio3">radio3</label> <input type="radio" checked disabled id="test_radio4" name="ras"><label for="test_radio4">radio4</label>

多選

<input id="test_checkbox1" type="checkbox"><label for="test_checkbox1">check1</label> <input id="test_checkbox3" disabled type="checkbox"><label for="test_checkbox3">check3</label> <input id="test_checkbox4" checked disabled type="checkbox"><label for="test_checkbox4">check4</label>

部分樣式

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {display: block }audio, canvas, progress, video {display: inline-block;vertical-align: baseline }audio:not([controls]) {display: none;height: 0 }[hidden], template {display: none }li {list-style: none }a {background-color: transparent }a:active, a:hover {outline: 0 }abbr[title] {border-bottom: 1px dotted }b, strong {font-weight: 700 }dfn {font-style: italic }h1 {font-size: 2em;margin: .67em 0 }mark {background: #ff0;color: #000 }small {font-size: 80% }sub, sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline }sup {top: -.5em }sub {bottom: -.25em }img {border: 0 }svg:not(:root) {overflow: hidden }figure {margin: 1em 40px }hr {box-sizing: content-box;height: 0 }pre {overflow: auto }code, kbd, pre, samp {font-family: monospace, monospace;font-size: 1em }button, input, optgroup, select, textarea {color: inherit;font: inherit;margin: 0 }button {overflow: visible }button, select {text-transform: none }button, html input[type=button], input[type=reset], input[type=submit] {-webkit-appearance: button;cursor: pointer }button[disabled], html input[disabled] {cursor: default }button::-moz-focus-inner, input::-moz-focus-inner {border: 0;padding: 0 }input {line-height: normal }input[type=checkbox], input[type=radio] {box-sizing: border-box;padding: 0 }input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {height: auto }input[type=search] {-webkit-appearance: textfield;box-sizing: content-box }input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {-webkit-appearance: none }fieldset {border: 1px solid silver;margin: 0 2px;padding: .35em .625em .75em }legend {border: 0;padding: 0 }textarea {overflow: auto }optgroup {font-weight: 700 }table {border-collapse: collapse;border-spacing: 0 }td, th {padding: 0 }/*html*/ html {font-family: sans-serif;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100% } /*body*/ body{margin: 0;background-color: rgb(238,238,238);font-size:16px;padding: 20px;-webkit-box-sizing: border-box;box-sizing: border-box;font-family: "Microsoft YaHei";color:#333;text-shadow: 0 0 0.1px rgba(0,0,0,0.2); } /*button*/button {opacity: 0.9;line-height: 1rem;padding: 0.5rem 1rem;border: none;outline: none;background-color: white;text-decoration: none;position: relative;border-radius:2px;box-shadow:0 1px 3px darkgray;transition: box-shadow 0.5s ease-out;}button::before{content: '';display:block;position: absolute;left: 50%;top: 50%;border-radius: 10%/40%;-webkit-transform: translate(-50%, -50%) ;transform: translate(-50%, -50%) ;height: 100%;width: 100%;z-index: -1;-webkit-transition: all 0.5s cubic-bezier(0.23, 0.95, 0.56, 1);transition: all 0.5s cubic-bezier(0.23, 0.95, 0.56, 1);}button:hover{box-shadow:0 6px 16px darkgray;transition: all 0.8s ease-out;} button:active{opacity: 1;-webkit-transition: all 0.5s ease-out;transition: all 0.3s ease-out; }button:active::before{width: 0;height: 100%;border-radius: 0;background-color: rgba(0,0,0,.4);-webkit-transition: all 0.01s ease-out;transition: all 0.01s ease-out;} button.link{background:none;color:#0275d8;box-shadow: none; } button[disabled]{background-color:lightgray;color:darkgray;cursor:not-allowed;box-shadow: none; } .circle{border-radius: 100%; } button.circle{padding: 0;width: 3rem;height: 3rem;font-size: 1.5rem;box-shadow:0 6px 12px darkgray;} button.circle:hover{box-shadow:0 12px 24px darkgray; }button.circle::before{content: '';display:block;position: absolute;left: 50%;top: 50%;border-radius: 100%;-webkit-transform: translate(-50%, -50%) ;transform: translate(-50%, -50%) ;height: 100%;width: 100%;z-index: -1;-webkit-transition: all 0.5s cubic-bezier(0.23, 0.95, 0.56, 1);transition: all 0.5s cubic-bezier(0.23, 0.95, 0.56, 1);}button.circle:active::before{width: 0;height: 0;border-radius: 100%;background-color: rgba(0,0,0,.4);-webkit-transition: all 0.01s ease-out;transition: all 0.01s ease-out;}/*form*/ input[type=text], input[type=password], input[type=number]{padding: 0;border:none;text-indent: 0.5em;background: none;outline: none;border-bottom:2px solid #555;line-height: 32px;height: 32px;box-sizing: border-box; } input[type=text]:focus, input[type=password]:focus, input[type=number]:focus{border-bottom-color: rgb(0,150,136);color: rgb(0,150,136); } input[type=checkbox],input[type=radio]{display: none; } input[type=checkbox]+label,input[type=radio]+label{ line-height: 1em;text-indent: 1.2em;width: 1em;height: 1em;margin: 0.2em 0.1em;border: 2px solid #555;border-radius: 2px;padding: 0px;display: inline-block;position: relative;cursor: pointer; } input[type=radio]+label{border-radius: 1em; } input[type=checkbox]:checked+label,input[type=radio]:checked+label{border-color: rgb(0,150,136); }input[type=checkbox]:checked + label:after{content: '';display: block;width: 0.7em;height: 0.3em;margin: 0.2em 0.1em;top: 0;left: 0;transform:rotate(-45deg);-moz-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);position: absolute;border-left: 0.15em solid rgb(238,238,238);border-bottom: 0.15em solid rgb(238,238,238); } input[type=radio]:checked + label{background: rgb(0,150,136);box-shadow: 0 0 0 3px rgb(238,238,238) inset; }input[type=checkbox] + label:before,input[type=radio] + label:before{content: '';display:block;position: absolute;left: 50%;top: 50%;border-radius: 100%;-webkit-transform: translate(-50%, -50%) ;transform: translate(-50%, -50%) ;height: 4em;width: 4em;z-index: -1;-webkit-transition: all 0.5s cubic-bezier(0.23, 0.95, 0.56, 1);transition: all 0.5s cubic-bezier(0.23, 0.95, 0.56, 1);}input[type=checkbox]+ label:active::before,input[type=radio]+ label:active::before{width: 0;height: 0;border-radius: 100%;background-color: rgb(0,150,136);-webkit-transition: all 0.01s ease-out;transition: all 0.01s ease-out;}input[type=checkbox]:checked+ label:active::before,input[type=radio]:checked+ label:active::before{background-color: gray;}input[type=checkbox]:checked + label,input[type=radio]:checked + label {background-color: rgb(0,150,136);color: rgb(0,150,136); }input[type=checkbox] + label:active, input[type=checkbox]:checked + label:active,input[type=radio] + label:active, input[type=radio]:checked + label:active {background-color: rgb(0,150,136); }input[type=checkbox]:disabled + label, input[type=radio]:disabled + label{border-color:lightgray;color:lightgray;background-color: lightgray;pointer-events: none;}input[type=checkbox].switch+label{left :0;border-radius: 1em;border-color:gray;}input[type=checkbox]:checked.switch+label{left:1.5em;border-color:rgb(0,150,136); }input[type=checkbox].switch+label:after{content: "";position: absolute;display: block;margin-top: 50%;border-bottom: 2px solid lightgray;width: 1.4em;height: 0;transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);margin-left :1.1em;}input[type=checkbox]:checked.switch+label:after{border-bottom: 2px solid rgb(0,150,136); margin-left :-1.1em;}nav.btn-group{border-radius: 2px;overflow: hidden;float: left; }nav.btn-group button{float: left;border-radius: 0;box-shadow: none;}nav.btn-group button:hover{box-shadow: none;}nav.btn-group button:hover::after{content: "";display: block;position: absolute;width: 100%;height: 100%;top: 0;left: 0;background: rgba(0, 0, 0, 0.11); }nav.menu{height: 3rem;padding: 0 1em;background: white; } nav.menu>ul{padding: 0 1em;margin:0;line-height: 3rem;float: left; } mav.menu>ul>li{display: block;}.b-red{border: 1px solid #d9534f;color:#d9534f;} .b-orange{border: 1px solid #ec971f;color:#ec971f;} .b-blue{border: 1px solid #5CA3DE;color:#5CA3DE;} .b-green{border: 1px solid #71CA71;color:#71CA71;} .b-navy { border: 1px solid #001f3f;color: #001f3f;} .b-aqua { border: 1px solid #7fdbff;color: #7fdbff;} .b-teal { border: 1px solid rgb(0,150,136);color: rgb(0,150,136);} .b-olive { border: 1px solid #3d9970;color: #3d9970;} .b-lime { border: 1px solid #01ff70;color: #01ff70; } .b-yellow { border: 1px solid #ffdc00;color: #ffdc00; } .b-orange { border: 1px solid #ff851b;color: #ff851b; } .b-red { border: 1px solid #ff4136;color: #ff4136; } .b-fuchsia { border: 1px solid #f012be;color: #f012be; } .b-purple { border: 1px solid #b10dc9;color: #b10dc9; } .b-maroon { border: 1px solid #85144b;color: #85144b; } .b-white { border: 1px solid #ffffff;color: #ffffff; } .b-gray { border: 1px solid #aaaaaa;color: #aaaaaa; } .b-silver { border: 1px solid #dddddd;color: #dddddd; } .b-black { border: 1px solid #111111;color: #111111; }.bk-n{background: none;} .bs-n{box-shadow: none;}.red{background-color:#d9534f;color:white;} .orange{background-color:#ec971f;color:white;} .blue{background-color:#5CA3DE;color:white;} .green{background-color:#71CA71;color:white;} .navy { background-color: #001f3f; color:white;} .aqua { background-color: #7fdbff;color:white; } .teal { background-color: rgb(0,150,136); color:white;} .olive { background-color: #3d9970; color:white;} .lime { background-color: #01ff70; } .yellow { background-color: #ffdc00; } .orange { background-color: #ff851b; } .red { background-color: #ff4136; } .fuchsia { background-color: #f012be; } .purple { background-color: #b10dc9; } .maroon { background-color: #85144b; } .white { background-color: #ffffff; } .gray { background-color: #aaaaaa; } .silver { background-color: #dddddd; } .black { background-color: #111111; }.c-red{color:#d9534f;} .c-orange{color:#ec971f;} .c-blue{color:#5CA3DE;} .c-green{color:#71CA71;} .c-navy { color: #001f3f; } .c-aqua { color: #7fdbff; } .c-teal { color: rgb(0,150,136); } .c-olive { color: #3d9970; } .c-lime { color: #01ff70; } .c-yellow { color: #ffdc00; } .c-orange { color: #ff851b; } .c-red { color: #ff4136; } .c-fuchsia { color: #f012be; } .c-purple { color: #b10dc9; } .c-maroon { color: #85144b; } .c-white { color: #ffffff; } .c-gray { color: #aaaaaa; } .c-silver { color: #dddddd; } .c-black { color: #111111; }.fl,.fl *{display:block;float: left;clear: none;} .fl-l{float: left} .fl-r{float: right} .fl-n{float:none} .w-1 {width: 4.166666667%} .w-2 {width: 8.333333333%} .w-3 {width: 12.5%} .w-4 {width: 16.66666667%} .w-5 {width: 20.83333333%} .w-6 {width: 25%} .w-7 {width: 29.16666667%} .w-8 {width: 33.33333333%} .w-9 {width: 37.5%} .w-10 {width: 41.66666667%} .w-11 {width: 45.83333333%} .w-12 {width: 50%} .w-13 {width: 54.16666667%} .w-14 {width: 58.33333333%} .w-15 {width: 62.5%} .w-16 {width: 66.66666667%} .w-17 {width: 70.83333333%} .w-18 {width: 75%} .w-19 {width: 79.16666667%} .w-20 {width: 83.33333333%} .w-21 {width: 87.5%} .w-22 {width: 91.66666667%} .w-23 {width: 95.83333333%} .w-24 {width: 100%}.h-1 {height: 16px;line-height: 16px;} .h-2 {height: 28px;line-height: 28px;} .h-3 {height: 32px;line-height: 32px;} .h-4 {height: 48px} .h-5 {height: 64px} .h-6 {height: 80px} .h-7 {height: 96px}.t-l{text-align: left} .t-c{text-align: center} .t-r{text-align: right}.f,.f *{display: flex} .f-1 {flex:1} .f-2 {flex:2} .f-3 {flex:3} .f-4 {flex:4} .f-5 {flex:5} .f-6 {flex:6} .f-7 {flex:7} .f-8 {flex:8} .f-9 {flex:9} .f-10{flex:10} .f-11{flex:11} .f-12{flex:12} .f-13{flex:13} .f-14{flex:14} .f-15{flex:15} .f-16{flex:16} .f-17{flex:17} .f-18{flex:18} .f-19{flex:19} .f-20{flex:20} .f-21{flex:21} .f-22{flex:22} .f-23{flex:23} .f-24{flex:24}

總結

以上是生活随笔為你收集整理的纯CSS3实现Material Design的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。