Mixing
scss file set place holder text to bold
I have an angular front end in which i have a form with textarea:
<mat-form-field class="full-width">
<textarea class="left-alligned" formcontrolname="x1" matInput placeholder="some text"/>
</mat-form-field>
i also have a scss file for that component with:
mat-form-field{
margin-left:20px;
}
I have tried using selecotors by class
.s {
mat-palceholder:{
font-weight: bold;
}
}
but that didnt work...
How do i make the placeholder text BOLD?
How do i make part of the placeholder text BOLD?
i also did:
added class name
<mat-form-field class="full-width">
<textarea class="left-alligned x1" formcontrolname="x1" matInput placeholder="some text"/>
</mat-form-field>
added to the scss file
.x1::placeholder{
color: green;
font-weight: bold;
}
but that didnt work..
thanks
html css
angular html5 asked Nov 22 '18 at 9:04
user1997656user1997656
173314
add a comment |
I have an angular front end in which i have a form with textarea:
<mat-form-field class="full-width">
<textarea class="left-alligned" formcontrolname="x1" matInput placeholder="some text"/>
</mat-form-field>
i also have a scss file for that component with:
mat-form-field{
margin-left:20px;
}
I have tried using selecotors by class
.s {
mat-palceholder:{
font-weight: bold;
}
}
but that didnt work...
How do i make the placeholder text BOLD?
How do i make part of the placeholder text BOLD?
i also did:
added class name
<mat-form-field class="full-width">
<textarea class="left-alligned x1" formcontrolname="x1" matInput placeholder="some text"/>
</mat-form-field>
added to the scss file
.x1::placeholder{
color: green;
font-weight: bold;
}
but that didnt work..
thanks
html css
angular html5 asked Nov 22 '18 at 9:04
user1997656user1997656
173314
1
Possible duplicate of How to set the color and font style of placeholder text
– Harsh Patel
Nov 22 '18 at 9:07
Have you set the ViewEncapsulation to "None" in the component?
– Niral Munjariya
Nov 22 '18 at 9:42
add a comment |
I have an angular front end in which i have a form with textarea:
<mat-form-field class="full-width">
<textarea class="left-alligned" formcontrolname="x1" matInput placeholder="some text"/>
</mat-form-field>
i also have a scss file for that component with:
mat-form-field{
margin-left:20px;
}
I have tried using selecotors by class
.s {
mat-palceholder:{
font-weight: bold;
}
}
but that didnt work...
How do i make the placeholder text BOLD?
How do i make part of the placeholder text BOLD?
i also did:
added class name
<mat-form-field class="full-width">
<textarea class="left-alligned x1" formcontrolname="x1" matInput placeholder="some text"/>
</mat-form-field>
added to the scss file
.x1::placeholder{
color: green;
font-weight: bold;
}
but that didnt work..
thanks
html css
angular html5 asked Nov 22 '18 at 9:04
user1997656user1997656
173314
I have an angular front end in which i have a form with textarea:
<mat-form-field class="full-width">
<textarea class="left-alligned" formcontrolname="x1" matInput placeholder="some text"/>
</mat-form-field>
i also have a scss file for that component with:
mat-form-field{
margin-left:20px;
}
I have tried using selecotors by class
.s {
mat-palceholder:{
font-weight: bold;
}
}
but that didnt work...
How do i make the placeholder text BOLD?
How do i make part of the placeholder text BOLD?
i also did:
added class name
<mat-form-field class="full-width">
<textarea class="left-alligned x1" formcontrolname="x1" matInput placeholder="some text"/>
</mat-form-field>
added to the scss file
.x1::placeholder{
color: green;
font-weight: bold;
}
but that didnt work..
thanks
html css
angular html5 html css
angular html5 asked Nov 22 '18 at 9:04
user1997656user1997656
173314
asked Nov 22 '18 at 9:04
user1997656user1997656
173314
edited Nov 22 '18 at 9:34
user1997656
asked Nov 22 '18 at 9:04
user1997656user1997656
173314
asked Nov 22 '18 at 9:04
user1997656user1997656
173314
asked Nov 22 '18 at 9:04
user1997656user1997656
173314
173314
1
Possible duplicate of How to set the color and font style of placeholder text
– Harsh Patel
Nov 22 '18 at 9:07
Have you set the ViewEncapsulation to "None" in the component?
– Niral Munjariya
Nov 22 '18 at 9:42
add a comment |
1
Possible duplicate of How to set the color and font style of placeholder text
– Harsh Patel
Nov 22 '18 at 9:07
Have you set the ViewEncapsulation to "None" in the component?
– Niral Munjariya
Nov 22 '18 at 9:42
1
1
Possible duplicate of How to set the color and font style of placeholder text
– Harsh Patel
Nov 22 '18 at 9:07
Possible duplicate of How to set the color and font style of placeholder text
– Harsh Patel
Nov 22 '18 at 9:07
Have you set the ViewEncapsulation to "None" in the component?
– Niral Munjariya
Nov 22 '18 at 9:42
Have you set the ViewEncapsulation to "None" in the component?
– Niral Munjariya
Nov 22 '18 at 9:42
add a comment |
4 Answers
4
active
oldest
votes
Use the ::placeholder selector along with the input class.
.left-alligned::placeholder { // Your Css code }
More reading: Placeholders
answered Nov 22 '18 at 9:09
Allan JebarajAllan Jebaraj
450211
thanks.. but thats not working...see my edit
– user1997656
Nov 22 '18 at 9:34
add a comment |
please use <textarea></textarea> like this... without any space beetween tags.
answered Nov 22 '18 at 9:41
rajnik faldurajnik faldu
747
add a comment |
Try to set encapsulation as below:
@Component({
encapsulation: ViewEncapsulation.None
})
Maybe your styles are not working because mat-form-field is a different component and your textarea is inside that component.
For more information, please check this
answered Nov 22 '18 at 9:48
Niral MunjariyaNiral Munjariya
792520
add a comment |
This how you can change the placeholder style
::placeholder { // *::placeholder
color: red;
font-weight:bold
}
.class-name::placeholder {
color: red;
font-weight:bold
}
input::placeholder {
color: red;
font-weight:bold
}
as far I know you can't change some of the text to bold and other is not the style apply to all placeholder text
in case of angular material
style.css
mat-form-field span.mat-form-field-label-wrapper label {
color:red !important;
}
mat-form-field.mat-focused span.mat-form-field-label-wrapper label {
color:blue !important;
}
demo
answered Nov 22 '18 at 9:09
malbarmawimalbarmawi
5,49331232
thanks.. but thats not working...see my edit
– user1997656
Nov 22 '18 at 9:30
@user1997656 I have update the answer and include onl;ine demo
– malbarmawi
Nov 22 '18 at 9:54
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53427242%2fscss-file-set-place-holder-text-to-bold%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
Use the ::placeholder selector along with the input class.
.left-alligned::placeholder { // Your Css code }
More reading: Placeholders
answered Nov 22 '18 at 9:09
Allan JebarajAllan Jebaraj
450211
thanks.. but thats not working...see my edit
– user1997656
Nov 22 '18 at 9:34
add a comment |
Use the ::placeholder selector along with the input class.
.left-alligned::placeholder { // Your Css code }
More reading: Placeholders
answered Nov 22 '18 at 9:09
Allan JebarajAllan Jebaraj
450211
thanks.. but thats not working...see my edit
– user1997656
Nov 22 '18 at 9:34
add a comment |
Use the ::placeholder selector along with the input class.
.left-alligned::placeholder { // Your Css code }
More reading: Placeholders
answered Nov 22 '18 at 9:09
Allan JebarajAllan Jebaraj
450211
Use the ::placeholder selector along with the input class.
.left-alligned::placeholder { // Your Css code }
More reading: Placeholders
answered Nov 22 '18 at 9:09
Allan JebarajAllan Jebaraj
450211
answered Nov 22 '18 at 9:09
Allan JebarajAllan Jebaraj
450211
answered Nov 22 '18 at 9:09
Allan JebarajAllan Jebaraj
450211
answered Nov 22 '18 at 9:09
Allan JebarajAllan Jebaraj
450211
450211
thanks.. but thats not working...see my edit
– user1997656
Nov 22 '18 at 9:34
add a comment |
thanks.. but thats not working...see my edit
– user1997656
Nov 22 '18 at 9:34
thanks.. but thats not working...see my edit
– user1997656
Nov 22 '18 at 9:34
thanks.. but thats not working...see my edit
– user1997656
Nov 22 '18 at 9:34
add a comment |
please use <textarea></textarea> like this... without any space beetween tags.
answered Nov 22 '18 at 9:41
rajnik faldurajnik faldu
747
add a comment |
please use <textarea></textarea> like this... without any space beetween tags.
answered Nov 22 '18 at 9:41
rajnik faldurajnik faldu
747
add a comment |
please use <textarea></textarea> like this... without any space beetween tags.
answered Nov 22 '18 at 9:41
rajnik faldurajnik faldu
747
please use <textarea></textarea> like this... without any space beetween tags.
answered Nov 22 '18 at 9:41
rajnik faldurajnik faldu
747
answered Nov 22 '18 at 9:41
rajnik faldurajnik faldu
747
answered Nov 22 '18 at 9:41
rajnik faldurajnik faldu
747
answered Nov 22 '18 at 9:41
rajnik faldurajnik faldu
747
747
add a comment |
add a comment |
Try to set encapsulation as below:
@Component({
encapsulation: ViewEncapsulation.None
})
Maybe your styles are not working because mat-form-field is a different component and your textarea is inside that component.
For more information, please check this
answered Nov 22 '18 at 9:48
Niral MunjariyaNiral Munjariya
792520
add a comment |
Try to set encapsulation as below:
@Component({
encapsulation: ViewEncapsulation.None
})
Maybe your styles are not working because mat-form-field is a different component and your textarea is inside that component.
For more information, please check this
answered Nov 22 '18 at 9:48
Niral MunjariyaNiral Munjariya
792520
add a comment |
Try to set encapsulation as below:
@Component({
encapsulation: ViewEncapsulation.None
})
Maybe your styles are not working because mat-form-field is a different component and your textarea is inside that component.
For more information, please check this
answered Nov 22 '18 at 9:48
Niral MunjariyaNiral Munjariya
792520
Try to set encapsulation as below:
@Component({
encapsulation: ViewEncapsulation.None
})
Maybe your styles are not working because mat-form-field is a different component and your textarea is inside that component.
For more information, please check this
answered Nov 22 '18 at 9:48
Niral MunjariyaNiral Munjariya
792520
answered Nov 22 '18 at 9:48
Niral MunjariyaNiral Munjariya
792520
answered Nov 22 '18 at 9:48
Niral MunjariyaNiral Munjariya
792520
answered Nov 22 '18 at 9:48
Niral MunjariyaNiral Munjariya
792520
792520
add a comment |
add a comment |
This how you can change the placeholder style
::placeholder { // *::placeholder
color: red;
font-weight:bold
}
.class-name::placeholder {
color: red;
font-weight:bold
}
input::placeholder {
color: red;
font-weight:bold
}
as far I know you can't change some of the text to bold and other is not the style apply to all placeholder text
in case of angular material
style.css
mat-form-field span.mat-form-field-label-wrapper label {
color:red !important;
}
mat-form-field.mat-focused span.mat-form-field-label-wrapper label {
color:blue !important;
}
demo
answered Nov 22 '18 at 9:09
malbarmawimalbarmawi
5,49331232
thanks.. but thats not working...see my edit
– user1997656
Nov 22 '18 at 9:30
@user1997656 I have update the answer and include onl;ine demo
– malbarmawi
Nov 22 '18 at 9:54
add a comment |
This how you can change the placeholder style
::placeholder { // *::placeholder
color: red;
font-weight:bold
}
.class-name::placeholder {
color: red;
font-weight:bold
}
input::placeholder {
color: red;
font-weight:bold
}
as far I know you can't change some of the text to bold and other is not the style apply to all placeholder text
in case of angular material
style.css
mat-form-field span.mat-form-field-label-wrapper label {
color:red !important;
}
mat-form-field.mat-focused span.mat-form-field-label-wrapper label {
color:blue !important;
}
demo
answered Nov 22 '18 at 9:09
malbarmawimalbarmawi
5,49331232
thanks.. but thats not working...see my edit
– user1997656
Nov 22 '18 at 9:30
@user1997656 I have update the answer and include onl;ine demo
– malbarmawi
Nov 22 '18 at 9:54
add a comment |
This how you can change the placeholder style
::placeholder { // *::placeholder
color: red;
font-weight:bold
}
.class-name::placeholder {
color: red;
font-weight:bold
}
input::placeholder {
color: red;
font-weight:bold
}
as far I know you can't change some of the text to bold and other is not the style apply to all placeholder text
in case of angular material
style.css
mat-form-field span.mat-form-field-label-wrapper label {
color:red !important;
}
mat-form-field.mat-focused span.mat-form-field-label-wrapper label {
color:blue !important;
}
demo
answered Nov 22 '18 at 9:09
malbarmawimalbarmawi
5,49331232
This how you can change the placeholder style
::placeholder { // *::placeholder
color: red;
font-weight:bold
}
.class-name::placeholder {
color: red;
font-weight:bold
}
input::placeholder {
color: red;
font-weight:bold
}
as far I know you can't change some of the text to bold and other is not the style apply to all placeholder text
in case of angular material
style.css
mat-form-field span.mat-form-field-label-wrapper label {
color:red !important;
}
mat-form-field.mat-focused span.mat-form-field-label-wrapper label {
color:blue !important;
}
demo
answered Nov 22 '18 at 9:09
malbarmawimalbarmawi
5,49331232
edited Nov 22 '18 at 9:53
answered Nov 22 '18 at 9:09
malbarmawimalbarmawi
5,49331232
answered Nov 22 '18 at 9:09
malbarmawimalbarmawi
5,49331232
answered Nov 22 '18 at 9:09
malbarmawimalbarmawi
5,49331232
5,49331232
thanks.. but thats not working...see my edit
– user1997656
Nov 22 '18 at 9:30
@user1997656 I have update the answer and include onl;ine demo
– malbarmawi
Nov 22 '18 at 9:54
add a comment |
thanks.. but thats not working...see my edit
– user1997656
Nov 22 '18 at 9:30
@user1997656 I have update the answer and include onl;ine demo
– malbarmawi
Nov 22 '18 at 9:54
thanks.. but thats not working...see my edit
– user1997656
Nov 22 '18 at 9:30
thanks.. but thats not working...see my edit
– user1997656
Nov 22 '18 at 9:30
@user1997656 I have update the answer and include onl;ine demo
– malbarmawi
Nov 22 '18 at 9:54
@user1997656 I have update the answer and include onl;ine demo
– malbarmawi
Nov 22 '18 at 9:54
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53427242%2fscss-file-set-place-holder-text-to-bold%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Possible duplicate of How to set the color and font style of placeholder text
– Harsh Patel
Nov 22 '18 at 9:07
Have you set the ViewEncapsulation to "None" in the component?
– Niral Munjariya
Nov 22 '18 at 9:42