Created
May 27, 2014 12:12
-
-
Save cubiq/29d30429e663b17e3a80 to your computer and use it in GitHub Desktop.
How to reset a select tag
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Styled Select</title> | |
| </head> | |
| <style> | |
| * { | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| /* SELECT reset starts here ============================================== */ | |
| .styled-select { | |
| position: relative; | |
| } | |
| .styled-select:after { | |
| position: absolute; | |
| z-index: 1; | |
| content: '\25be'; /* you probably want to use an icon font */ | |
| pointer-events: none; | |
| } | |
| .styled-select select { | |
| font: inherit; | |
| background-color: transparent; | |
| padding: 0; | |
| margin: 0; | |
| border: 0; | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| appearance: none; | |
| position: relative; | |
| z-index: 2; | |
| } | |
| .styled-select select:focus { | |
| outline: 0; | |
| z-index: 1; | |
| } | |
| .styled-select select::-ms-expand { | |
| display: none; | |
| } | |
| @-moz-document url-prefix() { | |
| .styled-select select { | |
| text-indent: 0.01px; | |
| text-overflow: ''; | |
| } | |
| .styled-select select:focus { | |
| color: transparent; | |
| text-shadow: 0 0 0 #fff; | |
| } | |
| } | |
| /* reset ends here ============================================== */ | |
| /* Here comes the styling */ | |
| .styled-select { | |
| font-family: sans-serif; | |
| font-size: 16px; | |
| display: inline-block; | |
| background: #32B1C7; | |
| border-radius: 5px; | |
| box-shadow: inset 0 -2px 0 1px rgba(0,0,0,0.2); | |
| } | |
| .styled-select select { | |
| color: #fff; | |
| height: 40px; | |
| padding: 10px 40px 10px 10px; | |
| box-shadow: inset 0 20px rgba(255,255,255,0.3); | |
| text-shadow: 0 1px rgba(0,0,0,0.4); | |
| } | |
| .styled-select select:focus { | |
| background: #E88138; | |
| border-radius: 5px; | |
| box-shadow: inset 0 -2px 0 1px rgba(0,0,0,0.2), inset 0 20px rgba(255,255,255,0.3); | |
| } | |
| .styled-select:after { | |
| color: #fff; | |
| right: 0; | |
| top: 0; | |
| height: 37px; | |
| width: 28px; | |
| line-height: 40px; | |
| text-align: center; | |
| font-weight: bold; | |
| box-shadow: -1px 0 0 rgba(0,0,0,0.1); | |
| border-left: 1px solid rgba(255,255,255,0.3); | |
| text-shadow: 0 1px rgba(0,0,0,0.4); | |
| margin-right: 1px; | |
| } | |
| </style> | |
| <body> | |
| <label><select> | |
| <option>Select one</option> | |
| <option>Option 1</option> | |
| <option>Option 2</option> | |
| <option>Option 3</option> | |
| </select></label> | |
| <label class="styled-select"><select> | |
| <option>Select one</option> | |
| <option>Option 1</option> | |
| <option>Option 2</option> | |
| <option>Option 3</option> | |
| </select></label> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment