Skip to content

Instantly share code, notes, and snippets.

@matin
Last active December 11, 2015 10:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save matin/4585229 to your computer and use it in GitHub Desktop.
Save matin/4585229 to your computer and use it in GitHub Desktop.
override default selector style
/* 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; }
}
@matin
Copy link
Author

matin commented Jan 21, 2013

Make selector in browser more consistent with other parts of the design like the month field below:

@matin
Copy link
Author

matin commented Jan 21, 2013

@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