scss file set place holder text to bold
up vote
1
down vote
favorite
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 at 9:04
user1997656
163313
add a comment |
up vote
1
down vote
favorite
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 at 9:04
user1997656
163313
1
Possible duplicate of How to set the color and font style of placeholder text
– Harsh Patel
Nov 22 at 9:07
Have you set the ViewEncapsulation to "None" in the component?
– Niral Munjariya
Nov 22 at 9:42
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
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 at 9:04
user1997656
163313
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 at 9:04
user1997656
163313
asked Nov 22 at 9:04
user1997656
163313
edited Nov 22 at 9:34
asked Nov 22 at 9:04
user1997656
163313
asked Nov 22 at 9:04
user1997656
163313
asked Nov 22 at 9:04
user1997656
163313
163313
1
Possible duplicate of How to set the color and font style of placeholder text
– Harsh Patel
Nov 22 at 9:07
Have you set the ViewEncapsulation to "None" in the component?
– Niral Munjariya
Nov 22 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 at 9:07
Have you set the ViewEncapsulation to "None" in the component?
– Niral Munjariya
Nov 22 at 9:42
1
1
Possible duplicate of How to set the color and font style of placeholder text
– Harsh Patel
Nov 22 at 9:07
Possible duplicate of How to set the color and font style of placeholder text
– Harsh Patel
Nov 22 at 9:07
Have you set the ViewEncapsulation to "None" in the component?
– Niral Munjariya
Nov 22 at 9:42
Have you set the ViewEncapsulation to "None" in the component?
– Niral Munjariya
Nov 22 at 9:42
add a comment |
4 Answers
4
active
oldest
votes
up vote
0
down vote
Use the ::placeholder selector along with the input class.
.left-alligned::placeholder { // Your Css code }
More reading: Placeholders
answered Nov 22 at 9:09
Allan Jebaraj
330110
thanks.. but thats not working...see my edit
– user1997656
Nov 22 at 9:34
add a comment |
up vote
0
down vote
please use <textarea></textarea> like this... without any space beetween tags.
answered Nov 22 at 9:41
rajnik faldu
727
add a comment |
up vote
0
down vote
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 at 9:48
Niral Munjariya
689419
add a comment |
up vote
0
down vote
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 at 9:09
malbarmawi
5,01331131
thanks.. but thats not working...see my edit
– user1997656
Nov 22 at 9:30
@user1997656 I have update the answer and include onl;ine demo
– malbarmawi
Nov 22 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',
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
up vote
0
down vote
Use the ::placeholder selector along with the input class.
.left-alligned::placeholder { // Your Css code }
More reading: Placeholders
answered Nov 22 at 9:09
Allan Jebaraj
330110
thanks.. but thats not working...see my edit
– user1997656
Nov 22 at 9:34
add a comment |
up vote
0
down vote
Use the ::placeholder selector along with the input class.
.left-alligned::placeholder { // Your Css code }
More reading: Placeholders
answered Nov 22 at 9:09
Allan Jebaraj
330110
thanks.. but thats not working...see my edit
– user1997656
Nov 22 at 9:34
add a comment |
up vote
0
down vote
up vote
0
down vote
Use the ::placeholder selector along with the input class.
.left-alligned::placeholder { // Your Css code }
More reading: Placeholders
answered Nov 22 at 9:09
Allan Jebaraj
330110
Use the ::placeholder selector along with the input class.
.left-alligned::placeholder { // Your Css code }
More reading: Placeholders
answered Nov 22 at 9:09
Allan Jebaraj
330110
answered Nov 22 at 9:09
Allan Jebaraj
330110
answered Nov 22 at 9:09
Allan Jebaraj
330110
answered Nov 22 at 9:09
Allan Jebaraj
330110
330110
thanks.. but thats not working...see my edit
– user1997656
Nov 22 at 9:34
add a comment |
thanks.. but thats not working...see my edit
– user1997656
Nov 22 at 9:34
thanks.. but thats not working...see my edit
– user1997656
Nov 22 at 9:34
thanks.. but thats not working...see my edit
– user1997656
Nov 22 at 9:34
add a comment |
up vote
0
down vote
please use <textarea></textarea> like this... without any space beetween tags.
answered Nov 22 at 9:41
rajnik faldu
727
add a comment |
up vote
0
down vote
please use <textarea></textarea> like this... without any space beetween tags.
answered Nov 22 at 9:41
rajnik faldu
727
add a comment |
up vote
0
down vote
up vote
0
down vote
please use <textarea></textarea> like this... without any space beetween tags.
answered Nov 22 at 9:41
rajnik faldu
727
please use <textarea></textarea> like this... without any space beetween tags.
answered Nov 22 at 9:41
rajnik faldu
727
answered Nov 22 at 9:41
rajnik faldu
727
answered Nov 22 at 9:41
rajnik faldu
727
answered Nov 22 at 9:41
rajnik faldu
727
727
add a comment |
add a comment |
up vote
0
down vote
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 at 9:48
Niral Munjariya
689419
add a comment |
up vote
0
down vote
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 at 9:48
Niral Munjariya
689419
add a comment |
up vote
0
down vote
up vote
0
down vote
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 at 9:48
Niral Munjariya
689419
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 at 9:48
Niral Munjariya
689419
answered Nov 22 at 9:48
Niral Munjariya
689419
answered Nov 22 at 9:48
Niral Munjariya
689419
answered Nov 22 at 9:48
Niral Munjariya
689419
689419
add a comment |
add a comment |
up vote
0
down vote
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 at 9:09
malbarmawi
5,01331131
thanks.. but thats not working...see my edit
– user1997656
Nov 22 at 9:30
@user1997656 I have update the answer and include onl;ine demo
– malbarmawi
Nov 22 at 9:54
add a comment |
up vote
0
down vote
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 at 9:09
malbarmawi
5,01331131
thanks.. but thats not working...see my edit
– user1997656
Nov 22 at 9:30
@user1997656 I have update the answer and include onl;ine demo
– malbarmawi
Nov 22 at 9:54
add a comment |
up vote
0
down vote
up vote
0
down vote
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 at 9:09
malbarmawi
5,01331131
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 at 9:09
malbarmawi
5,01331131
edited Nov 22 at 9:53
answered Nov 22 at 9:09
malbarmawi
5,01331131
answered Nov 22 at 9:09
malbarmawi
5,01331131
answered Nov 22 at 9:09
malbarmawi
5,01331131
5,01331131
thanks.. but thats not working...see my edit
– user1997656
Nov 22 at 9:30
@user1997656 I have update the answer and include onl;ine demo
– malbarmawi
Nov 22 at 9:54
add a comment |
thanks.. but thats not working...see my edit
– user1997656
Nov 22 at 9:30
@user1997656 I have update the answer and include onl;ine demo
– malbarmawi
Nov 22 at 9:54
thanks.. but thats not working...see my edit
– user1997656
Nov 22 at 9:30
thanks.. but thats not working...see my edit
– user1997656
Nov 22 at 9:30
@user1997656 I have update the answer and include onl;ine demo
– malbarmawi
Nov 22 at 9:54
@user1997656 I have update the answer and include onl;ine demo
– malbarmawi
Nov 22 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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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 at 9:07
Have you set the ViewEncapsulation to "None" in the component?
– Niral Munjariya
Nov 22 at 9:42