As stated in the title, how do I customize these elements? It seems they are using transparent background which is very difficult to view on most background palettes
Add a comment
|
4 Answers
Add one blank css file after "angular-material.css" and inside that blank css file overwrite the rules you want to customize.
For the problem you are facing I added the following rules in my custom.css.
md-input-container.md-default-theme label,
md-input-container.md-default-theme .md-placeholder{
color:grey !important;
}
Here you could change color or background-color as you like.
4 Comments
Ellone
Any idea how to change the text color when we type in the input and the line that is under the text when we focus the input ?
nicky
is there any way i can change it for all themes defined instead of mentioning class here md-input-container.md-default-theme
Hans Petter Naumann
@Ellone try this input.md-input:focus{ border-color: blue; }
chrismarx
this works, but adjusting the actual theme you're using as suggested by Jean F. is a much better, and supported solution
I would recommend to use the palette configuration:
app.config(function($mdThemingProvider) {
//change default color for primary
var indigo = $mdThemingProvider.extendPalette('indigo', {
'500': '569fd4'
});
$mdThemingProvider.definePalette('indigo', indigo);
//change default color for warn
var indigo = $mdThemingProvider.extendPalette('red', {
'500': 'ff5800'
});
$mdThemingProvider.definePalette('red', indigo);
$mdThemingProvider.theme('default').primaryPalette('indigo').warnPalette('red');
//here you change placeholder/foreground color.
$mdThemingProvider.theme('default').foregroundPalette[3] = "rgba(0,0,0,0.67)";
});
Source: How to set light foreground colors for text when using dark theme?
1 Comment
chrismarx
hmm, just setting foreground didnt work for me, to get the text to change in inputs, the theme had to use the "dark" setting
To change placeholder color do this, it changes the placeholder color to White:
/* do not group these rules */
.your-pre-defined-container > md-input-container > input::-webkit-input-placeholder {
color: #FFF;
}
.your-pre-defined-class > md-input-container > input:-moz-placeholder {
/* FF 4-18 */
color: #FFF;
}
.your-pre-defined-class > md-input-container > input::-moz-placeholder {
/* FF 19+ */
color: #FFF;
}
.your-pre-defined-class > md-input-container > input:-ms-input-placeholder {
/* IE 10+ */
color: #FFF;
}
Comments
To customize Angular Material's input/md-input-container component, you can add this style to your personal style sheet.
md-input-container {
display: inline-block;
position: relative;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 2px;
padding-right: 2px;
margin: 1px 0;
vertical-align: middle;
/*
* The .md-input class is added to the input/textarea
*/ }
md-input-container .md-input {
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
display: block;
margin-top: 0;
background: none;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 2px;
padding-right: 2px;
border-width: 1px 1px 1px 1px ;
line-height: 26px;
height: 30px;
-ms-flex-preferred-size: 26px;
border-radius: 5px;
border-style: solid;
width: 100%;
box-sizing: border-box;
float: left; }
md-input-container.md-input-focused .md-input,
md-input-container .md-input.ng-invalid.ng-dirty {
padding-bottom: 0;
border-width: 0 0 2px 0; }
md-input-container:not(.md-input-invalid).md-input-focused .md-input {
border-color: black;
}
md-input-container:not(.md-input-invalid).md-input-focused label {
padding-top: 0px;
color: green;
}
md-input-container .md-errors-spacer {
float: right;
min-height: 0px;
min-width: 0px; }
html[dir=rtl] md-input-container .md-errors-spacer {
float: left;
unicode-bidi: embed; }
body[dir=rtl] md-input-container .md-errors-spacer {
float: left;
unicode-bidi: embed; }
md-input-container .md-errors-spacer bdo[dir=rtl] {
direction: rtl;
unicode-bidi: bidi-override; }
md-input-container .md-errors-spacer bdo[dir=ltr] {
direction: ltr;
unicode-bidi: bidi-override; }
md-icon {
margin: auto;
background-repeat: no-repeat no-repeat;
display: inline-block;
vertical-align: middle;
fill: currentColor;
height: 24px;
width: 24px;}
md-icon svg {
pointer-events: none;
display: block; }
md-icon[md-font-icon] {
line-height: 1;
width: auto; }
md-input-container > md-icon {
position: absolute;
top: 5px;
left: 20px;
right: auto; }
md-input-container ng-messages, md-input-container data-ng-messages, md-input-container x-ng-messages,
md-input-container [ng-messages], md-input-container [data-ng-messages], md-input-container [x-ng-messages] {
position: relative;
float: right;
-webkit-order: 4;
-ms-flex-order: 4;
order: 4;
overflow: hidden;
clear: left; }
md-input-container ng-message, md-input-container data-ng-message, md-input-container x-ng-message,
md-input-container [ng-message], md-input-container [data-ng-message], md-input-container [x-ng-message],
md-input-container [ng-message-exp], md-input-container [data-ng-message-exp], md-input-container [x-ng-message-exp],
md-input-container .md-char-counter {
font-size: 12px;
line-height: 14px;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
opacity: 1;
margin-top: 0;
padding-top: 1px; }
md-input-container ng-message:not(.md-char-counter), md-input-container data-ng-message:not(.md-char-counter), md-input-container x-ng-message:not(.md-char-counter),
md-input-container [ng-message]:not(.md-char-counter), md-input-container [data-ng-message]:not(.md-char-counter), md-input-container [x-ng-message]:not(.md-char-counter),
md-input-container [ng-message-exp]:not(.md-char-counter), md-input-container [data-ng-message-exp]:not(.md-char-counter), md-input-container [x-ng-message-exp]:not(.md-char-counter),
md-input-container .md-char-counter:not(.md-char-counter) {
padding-right: 10px;
padding-left: 50px; }
md-input-container.md-input-focused label:not(.md-no-float), md-input-container.md-input-has-placeholder label:not(.md-no-float), md-input-container.md-input-has-value label:not(.md-no-float) {
-webkit-transform: translate3d(0, 20px, 0) scale(0.75);
transform: translate3d(0, 20px, 0) scale(0.75); }
md-input-container.md-default-theme.md-input-invalid ng-message, md-input-container.md-input-invalid ng-message, md-input-container.md-default-theme.md-input-invalid data-ng-message, md-input-container.md-input-invalid data-ng-message, md-input-container.md-default-theme.md-input-invalid x-ng-message, md-input-container.md-input-invalid x-ng-message, md-input-container.md-default-theme.md-input-invalid [ng-message], md-input-container.md-input-invalid [ng-message], md-input-container.md-default-theme.md-input-invalid [data-ng-message], md-input-container.md-input-invalid [data-ng-message], md-input-container.md-default-theme.md-input-invalid [x-ng-message], md-input-container.md-input-invalid [x-ng-message], md-input-container.md-default-theme.md-input-invalid [ng-message-exp], md-input-container.md-input-invalid [ng-message-exp], md-input-container.md-default-theme.md-input-invalid [data-ng-message-exp], md-input-container.md-input-invalid [data-ng-message-exp], md-input-container.md-default-theme.md-input-invalid [x-ng-message-exp], md-input-container.md-input-invalid [x-ng-message-exp], md-input-container.md-default-theme.md-input-invalid .md-char-counter, md-input-container.md-input-invalid .md-char-counter {
color: rgb(255,44,0);
}
Comments
