Skip to content

Instantly share code, notes, and snippets.

@yarl
Last active August 29, 2015 14:13
Show Gist options
  • Save yarl/b3d4b4114d82c8bb041d to your computer and use it in GitHub Desktop.
Save yarl/b3d4b4114d82c8bb041d to your computer and use it in GitHub Desktop.
/*
CSS styling for <input>
https://github.com/angular/material/issues/276
JS:
$scope.select = "foo";
$scope.list = ["foo", "bar"];
Front:
<md-input-container flex>
<select class="md-input" ng-model="select" ng-options="value for value in list"></select>
</md-input-container>
*/
md-input-container select.md-input {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAD1BMVEUAAAB6enp6enp5eXn///+i9s37AAAAA3RSTlMAgIgilleHAAAAIklEQVR4AWOgG2BihgImmAgjhM+IUMOI4CNEGNHMYaKlKwEp5wBLyMAwGAAAAABJRU5ErkJggg==) 99% center no-repeat;
margin: 0;
padding: 0;
margin-bottom: 1px;
}
md-input-container select.md-input:focus {
border-bottom: 2px solid rgb(33, 150, 243) !important;
margin-bottom: 0;
}
md-input-container select.md-input:focus::-ms-value {
background: transparent;
color: inherit;
}
md-input-container select.md-input::-ms-expand {
display: none;
}
@demisx
Copy link

demisx commented Jan 12, 2015

Nice! Though, flex is probably not needed by default on <md-input-container>?

@yarl
Copy link
Author

yarl commented Jan 13, 2015

Yes, you're right.

@wibobm
Copy link

wibobm commented Feb 9, 2015

Do you have an snippet showing how you got the labels 'CodeList' and 'Lang' to appear so nicely next to the select in your attached image on the comment you left on issue 276?

@iamgurdip
Copy link

this is great, thank you.

@vectorderivative
Copy link

...Well, it happens I just had this tab open for a time and now I have forgotten wheter this was userful or not.
What was the purpose of this gist?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment