शीर्षक में कहा गया है, मैं इन तत्वों को कैसे अनुकूलित करूं? ऐसा लगता है कि वे पारदर्शी पृष्ठभूमि का उपयोग कर रहे हैं जो अधिकांश पृष्ठभूमि पैलेट पर देखना बहुत मुश्किल हैमैं कोणीय सामग्री के इनपुट/एमडी-इनपुट-कंटेनर घटक को कैसे अनुकूलित करूं?
उत्तर
"कोणीय-सामग्री.css" के बाद एक खाली सीएसएस फ़ाइल जोड़ें और उस खाली सीएसएस फ़ाइल के अंदर उन नियमों को ओवरराइट करें जिन्हें आप कस्टमाइज़ करना चाहते हैं।
जिस समस्या का आप सामना कर रहे हैं, उसके लिए मैंने अपने कस्टम.css में निम्नलिखित नियम जोड़े।
md-input-container.md-default-theme label,
md-input-container.md-default-theme .md-placeholder{
color:grey !important;
}
यहाँ आप color
या background-color
बदलने के रूप में आप की तरह कर सकते हैं।
मैं पैलेट विन्यास का उपयोग करने की सिफारिश करेंगे:
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)";
});
स्रोत: How to set light foreground colors for text when using dark theme?
हम्म है, इनपुट में बदलाव करने के लिए बस अग्रभूमि सेट करना मेरे लिए काम नहीं करता है, थीम को "अंधेरा" सेटिंग का उपयोग करना पड़ा – chrismarx
प्लेसहोल्डर रंग ऐसा करने को बदलने के लिए, यह प्लेसहोल्डर रंग सफेद करने के लिए परिवर्तन:
/* 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;
}
करने के लिए कोणीय सामग्री के इनपुट/एमडी-इनपुट-कंटेनर घटक को कस्टमाइज़ करें, आप इस शैली को अपनी व्यक्तिगत स्टाइल शीट में जोड़ सकते हैं।
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);
}
- 1. एनजी-सामग्री कोणीय 2 घटक
- 2. कोणीय 2 सामग्री: sidenav घटक
- 3. अपनी सामग्री के साथ घटक को प्रतिस्थापित करें - कोणीय 2
- 4. कोणीय 2: एनजी-सामग्री गुण बाल घटक
- 5. सामग्री के दौरान सामग्री को कैसे अनुकूलित किया जाए?
- 6. मैं ckeditor के टूलबार को कैसे अनुकूलित करूं
- 7. मैं सामग्री प्रदाता को कैसे प्रारंभ करूं?
- 8. मैं मेलबॉक्सर ईमेल विषय को कैसे अनुकूलित करूं?
- 9. कोणीय घटक
- 10. कोणीय 2: घटक टैग
- 11. कोणीय 2 घटक
- 12. मैं कैसे हल करूं: घटक **** में यूआरआई
- 13. क्या मैं प्रोग्रामर रूप से कोणीय/कोणीय सामग्री
- 14. कोणीय घटक
- 15. मैं WPF StatusBar लेआउट को कैसे अनुकूलित करूं?
- 16. मैं ActiveRecord find_in_batches क्वेरी को कैसे अनुकूलित करूं?
- 17. मैं सामग्री प्रकार को जूमला में कैसे सेट करूं?
- 18. कोणीय सामग्री
- 19. कोणीय 2 घटक
- 20. कोणीय 2 - घटक
- 21. कोणीय सामग्री
- 22. कोणीय 2 एक और घटक
- 23. कोणीय सामग्री
- 24. मैं एनजी-सामग्री कैसे एक्सेस करूं?
- 25. कोणीय घटक बाइंडिंग अपरिभाषित
- 26. कोणीय-सामग्री
- 27. कोणीय सामग्री
- 28. कोणीय सामग्री datepicker
- 29. कोणीय सामग्री
- 30. कोणीय (1.5.8) गतिशील घटक
आप नितिन धन्यवाद। मैं इसे आज़ाप कोशिश करूंगा – dragonmnl
कोई विचार है कि जब हम इनपुट में टाइप करते हैं तो टेक्स्ट रंग को बदलने के लिए और पाठ के नीचे की रेखा जब हम इनपुट पर ध्यान केंद्रित करते हैं? – Ellone
क्या कोई तरीका है कि मैं यहां कक्षा का उल्लेख करने के बजाय परिभाषित सभी विषयों के लिए इसे बदल सकता हूं md-input-container.md-default-theme – nicky