Last active
December 11, 2015 10:18
-
-
Save matin/4585229 to your computer and use it in GitHub Desktop.
override default selector style
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
/* month / year expiry stuff */ | |
.select { | |
height: 24px; | |
border: 1px solid #ccc; | |
border-top: 1px solid #888; | |
padding: 0px 0 0 0px; | |
background: url(https://www.poundpay.com/images/dropdown.png) no-repeat right #fff; | |
-webkit-appearance: none; | |
-moz-appearance: none; | |
overflow: hidden; | |
border-radius: 0; | |
display: block; | |
float:left; | |
} | |
select { | |
background: transparent; | |
border: 0; | |
-webkit-appearance: none; | |
-moz-appearance: none; | |
width: 100px; | |
padding: 4px 0 5px 8px; | |
text-align: left; | |
font-size: 12px; | |
position: relative; | |
top: -1px; | |
&:focus { | |
//outline: 0; | |
} | |
} | |
#expiration { | |
padding-right: 10px; | |
.month.select { | |
width: 42px; | |
margin-right: 8px; | |
&.disabled { | |
background-color: #eee; | |
select { | |
color: #333; | |
} | |
} | |
} | |
.year.select { | |
width: 65px; | |
&.disabled { | |
background-color: #eee; | |
color: #333; | |
select { | |
color: #333; | |
} | |
} | |
} | |
.month.select select { | |
padding-left: 5px; | |
} | |
} | |
@-moz-document url-prefix() { | |
#expiration .month.select select { padding-left: 0; } | |
#expiration .year.select select { padding-left: 5px; } | |
} |
@dblock: dug up this code from our payments iframe that we used to provide. We did it this way to keep the selectors consistent with the look and feel of the input fields. Use as you please.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Make selector in browser more consistent with other parts of the design like the month field below:
