├── img └── check.png ├── doc ├── resume.pdf └── resume.pptx ├── .gitattributes ├── .gitignore ├── README.md ├── styles ├── index.css └── normalize.css └── index.html /img/check.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IridescentMia/resume/HEAD/img/check.png -------------------------------------------------------------------------------- /doc/resume.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IridescentMia/resume/HEAD/doc/resume.pdf -------------------------------------------------------------------------------- /doc/resume.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IridescentMia/resume/HEAD/doc/resume.pptx -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | 7 | # Standard to msysgit 8 | *.doc diff=astextplain 9 | *.DOC diff=astextplain 10 | *.docx diff=astextplain 11 | *.DOCX diff=astextplain 12 | *.dot diff=astextplain 13 | *.DOT diff=astextplain 14 | *.pdf diff=astextplain 15 | *.PDF diff=astextplain 16 | *.rtf diff=astextplain 17 | *.RTF diff=astextplain 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Windows image file caches 2 | Thumbs.db 3 | ehthumbs.db 4 | 5 | # Folder config file 6 | Desktop.ini 7 | 8 | # Recycle Bin used on file shares 9 | $RECYCLE.BIN/ 10 | 11 | # Windows Installer files 12 | *.cab 13 | *.msi 14 | *.msm 15 | *.msp 16 | 17 | # Windows shortcuts 18 | *.lnk 19 | 20 | # ========================= 21 | # Operating System Files 22 | # ========================= 23 | 24 | # OSX 25 | # ========================= 26 | 27 | .DS_Store 28 | .AppleDouble 29 | .LSOverride 30 | 31 | # Thumbnails 32 | ._* 33 | 34 | # Files that might appear in the root of a volume 35 | .DocumentRevisions-V100 36 | .fseventsd 37 | .Spotlight-V100 38 | .TemporaryItems 39 | .Trashes 40 | .VolumeIcon.icns 41 | 42 | # Directories potentially created on remote AFP share 43 | .AppleDB 44 | .AppleDesktop 45 | Network Trash Folder 46 | Temporary Items 47 | .apdisk 48 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Resume # 2 | 3 | 趁着刚交完毕业论文还算清闲，把去年秋招用到的简历整理了一套模板，让它发挥一点余热。做这份简历，反复修改了很多次，从样式到内容，面试中也收到几个面试官对这份简历的肯定，发出来供大家参考。虽然简历比较针对前端开发的职位，但是稍作调整，技术类的简历都可以用。 4 | 5 | 特别要说明，简历样式排版可以参考一下，至于内容，并不是我原来简历的样子，请忽略！ 6 | 7 | ![](http://o77yvgv4e.bkt.clouddn.com/170404resume1.jpg) 8 | 9 | 下面简单说一下在这份简历制作过程中的思考： 10 | 11 | - **选择整体布局**：在这份简历的布局上，选择了左右平分一个 A4 页面的方式。相比于左窄右宽式布局和贯穿整行的布局，这是一个紧凑型的布局，可以在一个页面内放下更多的文字。 12 | 13 | - **简洁不花哨**：好看的简历很多，但是过于花哨的简历不适合用来技术类的岗位。这份简历，尽量保持简洁，不使用和简历主题无关的样式，让看到简历的人将注意力集中到简历内容上。 14 | 15 | - **为什么是PPT**：做简历的工具很多，word、ps 都可以完成，但是我用的是 PPT。相比于 ps，PPT 导出 pdf 文件后，文字可选择、链接可点击。这样，简历点击简历上的链接或者复制邮箱这些操作都会更容易。相比于 word，PPT 的排版更自由，可以自由发挥的空间更大。 16 | 17 | - **对齐**：没错，就是《写给大家看的设计书》中反复强调的四个设计的基本原则之一，后文依次说明。下面图中标出这份简历的参考线。任何元素都不是随意摆放的，它们遵循着看不见的线。 18 | 19 | ![](http://o77yvgv4e.bkt.clouddn.com/170404resume3.jpg) 20 | 21 | - **对比**：关于对比，颜色上，用蓝色将强调的内容突出显示；字号上，通过大小产生对比的同时，注意整个简历字号的统一，也就是说，不要使用过多种字号，同时保证字号之间形成对比。如果字号太相近了，不但不能产生对比，还会让人产生字号不统一的印象。这份简历中，包括正文字号、小标题字号、区块大标题字号和名字的超大字号，这四种字号。 22 | 23 | - **亲密性和重复**：这两个原则即便你不懂设计也会自觉遵守，所以放在一起简单说明。亲密性就是把相似内容分到一个模块，保持简历脉路清晰。重复指的是样式的重复、颜色和字号的重复等等。比如简历中重复使用小对沟区分条目。 24 | 25 | 以上是关于简历样式的一些思考和建议，希望可以帮到你。 26 | 27 | 我也做了一份响应式的 [在线版的简历](https://iridescentmia.github.io/resume/)。在这里可以找到 [PPT源文件](https://github.com/IridescentMia/resume/tree/master/doc)。 28 | 29 | 这份简历带给我很多好运气，它是我的原创，如果你喜欢可以拿去用，希望你能在合适的位置署上 [简历的Github地址](https://iridescentmia.github.io/resume/)， 或者，我也不介意你送我一颗 Star。 30 | 31 | 祝找工作顺利~ 32 | -------------------------------------------------------------------------------- /styles/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: "Microsoft Yahei", Helvetica, Arial, sans-serif; 3 | font-size: 15px; 4 | line-height: 1.8em; 5 | display: flex; 6 | justify-content: center; 7 | } 8 | 9 | .container { 10 | margin-top: 2.66666667em; 11 | /* 40/15 */ 12 | } 13 | 14 | h1, 15 | strong, 16 | a { 17 | color: rgb(102, 121, 223); 18 | } 19 | 20 | ul { 21 | list-style-type: none; 22 | padding: 0; 23 | } 24 | 25 | dl { 26 | margin: 0; 27 | } 28 | 29 | dl dt { 30 | font-weight: bold; 31 | font-size: 1.04em; 32 | } 33 | 34 | 35 | /* css for header */ 36 | 37 | header { 38 | display: flex; 39 | } 40 | 41 | h1 { 42 | margin-bottom: 0; 43 | } 44 | 45 | address { 46 | font-style: normal; 47 | } 48 | 49 | .contact li span { 50 | width: 5.33333333em; 51 | /* 80/15 */ 52 | text-align: right; 53 | display: inline-block; 54 | } 55 | 56 | 57 | /* end header */ 58 | 59 | 60 | /* css for content */ 61 | 62 | .content { 63 | display: flex; 64 | margin-top: 1.33333333em; 65 | } 66 | 67 | .content > article > section { 68 | padding: .5em 0; 69 | } 70 | 71 | h2 { 72 | font-size: 1.33333333em; 73 | /* 20/15 */ 74 | padding-bottom: .33333333em; 75 | /* 5/15 */ 76 | border-bottom: 1px solid black; 77 | } 78 | 79 | 80 | /* end content */ 81 | 82 | .circle { 83 | width: .53333333em; 84 | height: .53333333em; 85 | /* 8/15 */ 86 | margin: 0 .66666667em; 87 | /* 10/15 */ 88 | background: black; 89 | border-radius: 100%; 90 | display: inline-block; 91 | } 92 | 93 | 94 | /* css for education */ 95 | 96 | .edu-year { 97 | width: 5.8em; 98 | display: inline-block; 99 | } 100 | 101 | .edu-content { 102 | display: inline-block; 103 | margin-left: 6.7em; 104 | /* (87+10+4-0.5)/15 */ 105 | padding-left: .9em; 106 | /* 13.5/15 */ 107 | border-left: .06666667em solid black; 108 | /* 1/15 */ 109 | } 110 | 111 | .edu-title { 112 | font-weight: bold; 113 | margin-bottom: .2em; 114 | /* 3/15 */ 115 | display: inline-block; 116 | } 117 | 118 | .edu-placeholder { 119 | height: .625em; 120 | border-left: 1px solid black; 121 | margin-left: 6.7em; 122 | /* (87+10+4-0.5)/15 */ 123 | } 124 | 125 | 126 | /* end education */ 127 | 128 | 129 | /* css for project */ 130 | 131 | .project dl dt { 132 | margin-bottom: .2em; 133 | } 134 | 135 | .project dl dd { 136 | margin-left: .26666666em; 137 | /* 26666666.5/2 */ 138 | padding-left: .9em; 139 | /* 13.5/15 */ 140 | border-left: .06666667em solid black; 141 | /* 1px */ 142 | } 143 | .project .circle { 144 | margin-left: 0em; 145 | } 146 | .project dl dd:first-child { 147 | padding-top: .66666667em; 148 | /* 10/15 */ 149 | } 150 | .project dl dd:first-child span { 151 | display: inline-block; 152 | width: 6em; 153 | background-color: rgb(233,236,251); 154 | color: rgb(102, 121, 223); 155 | font-size: .8em; 156 | text-align: center; 157 | margin-left: 1em; 158 | line-height: 1.5em; 159 | border-radius: .75em; 160 | } 161 | .project dl dd:last-child { 162 | padding-bottom: .66666667em; 163 | } 164 | 165 | .key-point { 166 | background: rgb(102, 121, 223); 167 | color: white; 168 | padding: .13333333em .33333333em; 169 | /* 2px 5px */ 170 | margin: .33333333em 0 .6em; 171 | /* 5/15 */ 172 | display: inline-block; 173 | font-size: .875em; 174 | /* 14/16 */ 175 | } 176 | 177 | 178 | /* end project */ 179 | 180 | .award-item:before, 181 | .skill-item dd:before, 182 | .other-item li:before, 183 | .eval-item li:before, 184 | .project dl dd li:before { 185 | content: ""; 186 | background: url('../img/check.png') no-repeat; 187 | background-size: .8em .8em; 188 | /* 12/15 */ 189 | display: inline-block; 190 | width: .8em; 191 | height: .8em; 192 | padding-right: .33333333em; 193 | /* 5/15 */ 194 | } 195 | 196 | 197 | /* css for skill */ 198 | 199 | .skill-item dd { 200 | margin-left: 0; 201 | } 202 | 203 | .skill-item dt { 204 | margin: .33333333em 0; 205 | /* 5/15 */ 206 | } 207 | 208 | .skill-item { 209 | margin-bottom: 1em; 210 | /* 15/15 */ 211 | } 212 | 213 | .skill-item:last-child { 214 | margin-bottom: 0; 215 | } 216 | 217 | 218 | /* end skill */ 219 | 220 | 221 | /* css for footer */ 222 | 223 | footer { 224 | text-align: center; 225 | font-size: .8em; 226 | margin: 3em 0 2em; 227 | } 228 | 229 | 230 | /* end footer */ 231 | 232 | 233 | /* css for media */ 234 | 235 | @media screen and (min-width: 900px) { 236 | .container { 237 | width: 900px; 238 | } 239 | header { 240 | justify-content: space-between; 241 | } 242 | .title { 243 | text-align: left; 244 | } 245 | .content > article { 246 | width: 27em; 247 | } 248 | .content > article:first-child { 249 | padding-right: 3em; 250 | } 251 | .content > article:last-child { 252 | padding-left: 3em; 253 | } 254 | } 255 | 256 | @media screen and (max-width: 900px) { 257 | .container { 258 | width: 95%; 259 | } 260 | .content > article { 261 | width: 100%; 262 | } 263 | header, 264 | .content { 265 | flex-wrap: wrap; 266 | flex-direction: column; 267 | } 268 | .title { 269 | text-align: center; 270 | } 271 | header { 272 | align-items: center; 273 | } 274 | .content > article { 275 | padding: 0; 276 | } 277 | address { 278 | font-size: .94em; 279 | } 280 | } 281 | 282 | 283 | /* end media */ 284 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 王大胆 - 个人简历 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 |
17 |

王大胆

18 |

Web前端开发

19 |
20 |
21 | 27 |
28 |
29 |
30 |
31 |
32 |

教育经历

33 |
    34 |
  • 35 |
    36 |
    • 37 |
  • 2015 - 2017硕士
    • 38 |
  • 大黑山松岚大学 软件工程 39 |
    研究方向：数据可视化
    • 40 |
  • 41 |
    42 |
    • 43 |
  • 2011 - 2015本科
    • 44 |
  • 大黑山松岚大学 软件工程
    • 45 |
46 |
47 |
48 |

项目经验

49 |
    50 |
  • 51 |
    52 |
    2016.3 - 2016.6独立开发
    53 |
    ABCDViz — 数据可视化系统
    54 |
    D3.js 55 | Leaflet 56 | Node.js 57 | MongoDB 58 |
    59 |
      60 |
    • 使用 Leaflet.js 和 D3.js，对XXX进行绘制
      • 61 |
    • 使用 Express 和 Mongoose，完成XXX
      • 62 |
    • 通过 D3.js 绘制XXX图、XXX图等形式展现所选时空范围内XXX
      • 63 |
    • 根据XXX情况，使用XXX算法对XXX进行聚类，使用 D3.js，通过XXX展示XXX信息
      • 64 |
    65 |
    66 |
    67 |
    • 68 |
  • 69 |
    70 |
    2015.1 - 2015.5团队项目
    71 |
    ABCDViz — 数据可视化系统
    72 |
    D3.js 73 | Leaflet 74 | Node.js 75 | MongoDB 76 |
    77 |
      78 |
    • 使用 Leaflet.js 和 D3.js，对XXX进行绘制
      • 79 |
    • 使用 Express 和 Mongoose，完成XXX
      • 80 |
    • 通过 D3.js 绘制XXX图、XXX图等形式展现所选时空范围内XXX
      • 81 |
    • 根据XXX情况，使用XXX算法对XXX进行聚类，使用 D3.js，通过XXX展示XXX信息
      • 82 |
    83 |
    84 |
    85 |
    • 86 |
  • 87 |
    88 |
    2014.7 - 2014.10独立开发
    89 |
    ABCDViz — 数据可视化系统
    90 |
    D3.js 91 | Leaflet 92 | Node.js 93 | MongoDB 94 |
    95 |
      96 |
    • 使用 Leaflet.js 和 D3.js，对XXX进行绘制
      • 97 |
    • 使用 Express 和 Mongoose，完成XXX
      • 98 |
    • 通过 D3.js 绘制XXX图、XXX图等形式展现所选时空范围内XXX
      • 99 |
    100 |
    101 |
    102 |
    • 103 |
104 |
105 |
106 |
107 |
108 |

技能

109 |
110 |
Web前端
111 |
熟练使用 HTML / CSS 进行页面的搭建和布局，熟悉 HTML5 / CSS3 新特性
112 |
熟悉 JavaScript 语言，熟悉原生 DOM / BOM / Ajax 等
113 |
使用过 Bootstrap / jQuery 等
114 |
使用过 D3.js / Leaflet 等可视化相关库
115 |
对 SVG / Canvas 有一定的使用经验
116 |
使用 Vue.js / AngularJS 编写过简单的CRUD SPA
117 |
使用过 Less / Sass
118 |
119 |
120 |
Web后端
121 |
使用过 Node.js，能够用其进行数据处理，使用 Express 框架搭建简单的后端程序并与数据库交互
122 |
使用 ASP.NET 编写过后端程序并使用 ADO.NET 与数据库交互
123 |
有使用 SQL Server / MongoDB 等数据库的经验
124 |
125 |
126 |
其他技能
127 |
英语通过 CET6，能够流畅阅读英文文档
128 |
能够使用 Photoshop 和 Illustrator 完成简单的图像处理和平面设计
129 |
130 |
131 |
132 |

获奖记录

133 |
    134 |
  • 2015 – 2016 年度硕士研究生奖学金
    • 135 |
  • 2015 年全国大学生XXX创意设计大赛二等奖
    • 136 |
  • 2013 - 2014 学年大黑山松岚大学三好学生荣誉称号
    • 137 |
  • 2013 - 2014 学年大黑山松岚大学学习优秀奖学金
    • 138 |
  • 2012 - 2013 学年大黑山松岚大学文体活动奖学金
    • 139 |
  • 2013 年大学生XXX大赛省赛一等奖
    • 140 |
141 |
142 |
143 |

其他

144 |
    145 |
  • 设计大黑山松岚大学2015届毕业生文化衫，并被学校采纳，赠予4000+毕业生
    • 146 |
  • 设计大黑山松岚大学软件学院2015届毕业生logo
    • 147 |
  • XXX年加入软件学院XXX平面组，并在XXX年担任平面组组长，负责日常例会培训
    • 148 |
149 |
150 |
151 |
152 |
153 | 154 |
155 | 156 | 157 | 158 | -------------------------------------------------------------------------------- /styles/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /** 4 | * 1. Change the default font family in all browsers (opinionated). 5 | * 2. Prevent adjustments of font size after orientation changes in IE and iOS. 6 | */ 7 | 8 | html { 9 | font-family: sans-serif; /* 1 */ 10 | -ms-text-size-adjust: 100%; /* 2 */ 11 | -webkit-text-size-adjust: 100%; /* 2 */ 12 | } 13 | 14 | /** 15 | * Remove the margin in all browsers (opinionated). 16 | */ 17 | 18 | body { 19 | margin: 0; 20 | } 21 | 22 | /* HTML5 display definitions 23 | ========================================================================== */ 24 | 25 | /** 26 | * Add the correct display in IE 9-. 27 | * 1. Add the correct display in Edge, IE, and Firefox. 28 | * 2. Add the correct display in IE. 29 | */ 30 | 31 | article, 32 | aside, 33 | details, /* 1 */ 34 | figcaption, 35 | figure, 36 | footer, 37 | header, 38 | main, /* 2 */ 39 | menu, 40 | nav, 41 | section, 42 | summary { /* 1 */ 43 | display: block; 44 | } 45 | 46 | /** 47 | * Add the correct display in IE 9-. 48 | */ 49 | 50 | audio, 51 | canvas, 52 | progress, 53 | video { 54 | display: inline-block; 55 | } 56 | 57 | /** 58 | * Add the correct display in iOS 4-7. 59 | */ 60 | 61 | audio:not([controls]) { 62 | display: none; 63 | height: 0; 64 | } 65 | 66 | /** 67 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 68 | */ 69 | 70 | progress { 71 | vertical-align: baseline; 72 | } 73 | 74 | /** 75 | * Add the correct display in IE 10-. 76 | * 1. Add the correct display in IE. 77 | */ 78 | 79 | template, /* 1 */ 80 | [hidden] { 81 | display: none; 82 | } 83 | 84 | /* Links 85 | ========================================================================== */ 86 | 87 | /** 88 | * 1. Remove the gray background on active links in IE 10. 89 | * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. 90 | */ 91 | 92 | a { 93 | background-color: transparent; /* 1 */ 94 | -webkit-text-decoration-skip: objects; /* 2 */ 95 | } 96 | 97 | /** 98 | * Remove the outline on focused links when they are also active or hovered 99 | * in all browsers (opinionated). 100 | */ 101 | 102 | a:active, 103 | a:hover { 104 | outline-width: 0; 105 | } 106 | 107 | /* Text-level semantics 108 | ========================================================================== */ 109 | 110 | /** 111 | * 1. Remove the bottom border in Firefox 39-. 112 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 113 | */ 114 | 115 | abbr[title] { 116 | border-bottom: none; /* 1 */ 117 | text-decoration: underline; /* 2 */ 118 | text-decoration: underline dotted; /* 2 */ 119 | } 120 | 121 | /** 122 | * Prevent the duplicate application of `bolder` by the next rule in Safari 6. 123 | */ 124 | 125 | b, 126 | strong { 127 | font-weight: inherit; 128 | } 129 | 130 | /** 131 | * Add the correct font weight in Chrome, Edge, and Safari. 132 | */ 133 | 134 | b, 135 | strong { 136 | font-weight: bolder; 137 | } 138 | 139 | /** 140 | * Add the correct font style in Android 4.3-. 141 | */ 142 | 143 | dfn { 144 | font-style: italic; 145 | } 146 | 147 | /** 148 | * Correct the font size and margin on `h1` elements within `section` and 149 | * `article` contexts in Chrome, Firefox, and Safari. 150 | */ 151 | 152 | h1 { 153 | font-size: 2em; 154 | margin: 0.67em 0; 155 | } 156 | 157 | /** 158 | * Add the correct background and color in IE 9-. 159 | */ 160 | 161 | mark { 162 | background-color: #ff0; 163 | color: #000; 164 | } 165 | 166 | /** 167 | * Add the correct font size in all browsers. 168 | */ 169 | 170 | small { 171 | font-size: 80%; 172 | } 173 | 174 | /** 175 | * Prevent `sub` and `sup` elements from affecting the line height in 176 | * all browsers. 177 | */ 178 | 179 | sub, 180 | sup { 181 | font-size: 75%; 182 | line-height: 0; 183 | position: relative; 184 | vertical-align: baseline; 185 | } 186 | 187 | sub { 188 | bottom: -0.25em; 189 | } 190 | 191 | sup { 192 | top: -0.5em; 193 | } 194 | 195 | /* Embedded content 196 | ========================================================================== */ 197 | 198 | /** 199 | * Remove the border on images inside links in IE 10-. 200 | */ 201 | 202 | img { 203 | border-style: none; 204 | } 205 | 206 | /** 207 | * Hide the overflow in IE. 208 | */ 209 | 210 | svg:not(:root) { 211 | overflow: hidden; 212 | } 213 | 214 | /* Grouping content 215 | ========================================================================== */ 216 | 217 | /** 218 | * 1. Correct the inheritance and scaling of font size in all browsers. 219 | * 2. Correct the odd `em` font sizing in all browsers. 220 | */ 221 | 222 | code, 223 | kbd, 224 | pre, 225 | samp { 226 | font-family: monospace, monospace; /* 1 */ 227 | font-size: 1em; /* 2 */ 228 | } 229 | 230 | /** 231 | * Add the correct margin in IE 8. 232 | */ 233 | 234 | figure { 235 | margin: 1em 40px; 236 | } 237 | 238 | /** 239 | * 1. Add the correct box sizing in Firefox. 240 | * 2. Show the overflow in Edge and IE. 241 | */ 242 | 243 | hr { 244 | box-sizing: content-box; /* 1 */ 245 | height: 0; /* 1 */ 246 | overflow: visible; /* 2 */ 247 | } 248 | 249 | /* Forms 250 | ========================================================================== */ 251 | 252 | /** 253 | * 1. Change font properties to `inherit` in all browsers (opinionated). 254 | * 2. Remove the margin in Firefox and Safari. 255 | */ 256 | 257 | button, 258 | input, 259 | select, 260 | textarea { 261 | font: inherit; /* 1 */ 262 | margin: 0; /* 2 */ 263 | } 264 | 265 | /** 266 | * Restore the font weight unset by the previous rule. 267 | */ 268 | 269 | optgroup { 270 | font-weight: bold; 271 | } 272 | 273 | /** 274 | * Show the overflow in IE. 275 | * 1. Show the overflow in Edge. 276 | */ 277 | 278 | button, 279 | input { /* 1 */ 280 | overflow: visible; 281 | } 282 | 283 | /** 284 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 285 | * 1. Remove the inheritance of text transform in Firefox. 286 | */ 287 | 288 | button, 289 | select { /* 1 */ 290 | text-transform: none; 291 | } 292 | 293 | /** 294 | * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` 295 | * controls in Android 4. 296 | * 2. Correct the inability to style clickable types in iOS and Safari. 297 | */ 298 | 299 | button, 300 | html [type="button"], /* 1 */ 301 | [type="reset"], 302 | [type="submit"] { 303 | -webkit-appearance: button; /* 2 */ 304 | } 305 | 306 | /** 307 | * Remove the inner border and padding in Firefox. 308 | */ 309 | 310 | button::-moz-focus-inner, 311 | [type="button"]::-moz-focus-inner, 312 | [type="reset"]::-moz-focus-inner, 313 | [type="submit"]::-moz-focus-inner { 314 | border-style: none; 315 | padding: 0; 316 | } 317 | 318 | /** 319 | * Restore the focus styles unset by the previous rule. 320 | */ 321 | 322 | button:-moz-focusring, 323 | [type="button"]:-moz-focusring, 324 | [type="reset"]:-moz-focusring, 325 | [type="submit"]:-moz-focusring { 326 | outline: 1px dotted ButtonText; 327 | } 328 | 329 | /** 330 | * Change the border, margin, and padding in all browsers (opinionated). 331 | */ 332 | 333 | fieldset { 334 | border: 1px solid #c0c0c0; 335 | margin: 0 2px; 336 | padding: 0.35em 0.625em 0.75em; 337 | } 338 | 339 | /** 340 | * 1. Correct the text wrapping in Edge and IE. 341 | * 2. Correct the color inheritance from `fieldset` elements in IE. 342 | * 3. Remove the padding so developers are not caught out when they zero out 343 | * `fieldset` elements in all browsers. 344 | */ 345 | 346 | legend { 347 | box-sizing: border-box; /* 1 */ 348 | color: inherit; /* 2 */ 349 | display: table; /* 1 */ 350 | max-width: 100%; /* 1 */ 351 | padding: 0; /* 3 */ 352 | white-space: normal; /* 1 */ 353 | } 354 | 355 | /** 356 | * Remove the default vertical scrollbar in IE. 357 | */ 358 | 359 | textarea { 360 | overflow: auto; 361 | } 362 | 363 | /** 364 | * 1. Add the correct box sizing in IE 10-. 365 | * 2. Remove the padding in IE 10-. 366 | */ 367 | 368 | [type="checkbox"], 369 | [type="radio"] { 370 | box-sizing: border-box; /* 1 */ 371 | padding: 0; /* 2 */ 372 | } 373 | 374 | /** 375 | * Correct the cursor style of increment and decrement buttons in Chrome. 376 | */ 377 | 378 | [type="number"]::-webkit-inner-spin-button, 379 | [type="number"]::-webkit-outer-spin-button { 380 | height: auto; 381 | } 382 | 383 | /** 384 | * 1. Correct the odd appearance in Chrome and Safari. 385 | * 2. Correct the outline style in Safari. 386 | */ 387 | 388 | [type="search"] { 389 | -webkit-appearance: textfield; /* 1 */ 390 | outline-offset: -2px; /* 2 */ 391 | } 392 | 393 | /** 394 | * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. 395 | */ 396 | 397 | [type="search"]::-webkit-search-cancel-button, 398 | [type="search"]::-webkit-search-decoration { 399 | -webkit-appearance: none; 400 | } 401 | 402 | /** 403 | * Correct the text style of placeholders in Chrome, Edge, and Safari. 404 | */ 405 | 406 | ::-webkit-input-placeholder { 407 | color: inherit; 408 | opacity: 0.54; 409 | } 410 | 411 | /** 412 | * 1. Correct the inability to style clickable types in iOS and Safari. 413 | * 2. Change font properties to `inherit` in Safari. 414 | */ 415 | 416 | ::-webkit-file-upload-button { 417 | -webkit-appearance: button; /* 1 */ 418 | font: inherit; /* 2 */ 419 | } 420 | --------------------------------------------------------------------------------