HTML input placeholder, first letter CSS changes is not working with updated browser
0
I'm applying css for first letter in input placeholder
I have tried to add ::first-letter pseudo class to get the same. But my browser is updated one, so changes are not reflecting in updated browser here.
CSS:
.placeholder-ele-Casing{
::placeholder{
text-transform: lowercase !important;
&::first-letter{
text-transform: uppercase !important;
}
}
&::-webkit-input-placeholder{
text-transform: lowercase !important;
&::first-letter{
text-transform: uppercase !important;
}
}
}
<input type='text' class='placeholder-ele-Casing' placeholder='Mobile Number' />
Here I have used the placeholder to get the proper sentence casing.
Like this 'Mobile number'.
But i have found only lowercase transform of the text.. not the first-letter element...
html css css3 css-selectors
asked Dec 28 '18 at 7:50
Anupam MauryaAnupam Maurya
768
add a comment |
0
I'm applying css for first letter in input placeholder
I have tried to add ::first-letter pseudo class to get the same. But my browser is updated one, so changes are not reflecting in updated browser here.
CSS:
.placeholder-ele-Casing{
::placeholder{
text-transform: lowercase !important;
&::first-letter{
text-transform: uppercase !important;
}
}
&::-webkit-input-placeholder{
text-transform: lowercase !important;
&::first-letter{
text-transform: uppercase !important;
}
}
}
<input type='text' class='placeholder-ele-Casing' placeholder='Mobile Number' />
Here I have used the placeholder to get the proper sentence casing.
Like this 'Mobile number'.
But i have found only lowercase transform of the text.. not the first-letter element...
html css css3 css-selectors
asked Dec 28 '18 at 7:50
Anupam MauryaAnupam Maurya
768
add a comment |
0
0
0
1
I'm applying css for first letter in input placeholder
I have tried to add ::first-letter pseudo class to get the same. But my browser is updated one, so changes are not reflecting in updated browser here.
CSS:
.placeholder-ele-Casing{
::placeholder{
text-transform: lowercase !important;
&::first-letter{
text-transform: uppercase !important;
}
}
&::-webkit-input-placeholder{
text-transform: lowercase !important;
&::first-letter{
text-transform: uppercase !important;
}
}
}
<input type='text' class='placeholder-ele-Casing' placeholder='Mobile Number' />
Here I have used the placeholder to get the proper sentence casing.
Like this 'Mobile number'.
But i have found only lowercase transform of the text.. not the first-letter element...
html css css3 css-selectors
asked Dec 28 '18 at 7:50
Anupam MauryaAnupam Maurya
768
I'm applying css for first letter in input placeholder
I have tried to add ::first-letter pseudo class to get the same. But my browser is updated one, so changes are not reflecting in updated browser here.
CSS:
.placeholder-ele-Casing{
::placeholder{
text-transform: lowercase !important;
&::first-letter{
text-transform: uppercase !important;
}
}
&::-webkit-input-placeholder{
text-transform: lowercase !important;
&::first-letter{
text-transform: uppercase !important;
}
}
}
<input type='text' class='placeholder-ele-Casing' placeholder='Mobile Number' />
Here I have used the placeholder to get the proper sentence casing.
Like this 'Mobile number'.
But i have found only lowercase transform of the text.. not the first-letter element...
html css css3 css-selectors
html css css3 css-selectors
asked Dec 28 '18 at 7:50
Anupam MauryaAnupam Maurya
768
asked Dec 28 '18 at 7:50
Anupam MauryaAnupam Maurya
768
asked Dec 28 '18 at 7:50
Anupam MauryaAnupam Maurya
768
asked Dec 28 '18 at 7:50
Anupam MauryaAnupam Maurya
768
asked Dec 28 '18 at 7:50
Anupam MauryaAnupam Maurya
768
768
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
1
Your compiled CSS will be like
.placeholder-ele-Casing::placeholder {
text-transform: lowercase !important;
}
.placeholder-ele-Casing::placeholder::first-letter { /*will not work*/
text-transform: uppercase !important;
}
::placeholderand::first-letterboth are pseudo elements, so you
can't append the pseudo element after pseudo element while
Pseudo-classes are allowed anywhere.
So to make the first letter capital, you can just use
.placeholder-ele-Casing::placeholder {
text-transform: capitalize;
}
which will convert "mobile number" to "Mobile Number", but will not work for the text "mOBile number", to achieve this you need javascript.
answered Dec 28 '18 at 9:03
Pawan KumarPawan Kumar
1,026111
Thanks for reply. If it will not work as you said... So, how can I apply first letter css on placeholder input. Waiting for reply.
– Anupam Maurya
Dec 28 '18 at 10:14
As I mentioned in the last line of my answer, JavaScript is needed to achieve this. If you want I will add JavaScript code for the same.
– Pawan Kumar
Dec 30 '18 at 21:07
Yes, if possible try to search placeholder and first letter pseudo class of css. Highly recommended to read. And this first-letter pseudo class is not working for updated browsers.
– Anupam Maurya
Dec 31 '18 at 4:56
I know about both of the pseudo elements, and first-letter was pseudo class previously now it is pseudo element.
– Pawan Kumar
Dec 31 '18 at 8:54
But currently it is deprecated for updated chrome browser.::first-letterpseudo class element for::placeholderTry to understand, all I am talking about input placeholder text, and applying::first-letterpseudo class into in it. But it is not working only because it is deprecated.
– Anupam Maurya
Dec 31 '18 at 10:22
add a comment |
0
USE THIS CSS CODE
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
text-transform: initial;
}
::-moz-placeholder { /* Firefox 19+ */
text-transform: initial;
}
:-ms-input-placeholder { /* IE 10+ */
text-transform: initial;
}
:-moz-placeholder { /* Firefox 18- */
text-transform: initial;
}
answered Dec 28 '18 at 8:03
MohcinBNMohcinBN
1867
Thanks @MohcinBN here my use case is different... And first-letter pseudo class is get in deprecated in new browser. Let me know the way if found.
– Anupam Maurya
Dec 28 '18 at 10:15
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
});
}
});
draft saved
draft discarded
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%2f53955279%2fhtml-input-placeholder-first-letter-css-changes-is-not-working-with-updated-bro%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Your compiled CSS will be like
.placeholder-ele-Casing::placeholder {
text-transform: lowercase !important;
}
.placeholder-ele-Casing::placeholder::first-letter { /*will not work*/
text-transform: uppercase !important;
}
::placeholderand::first-letterboth are pseudo elements, so you
can't append the pseudo element after pseudo element while
Pseudo-classes are allowed anywhere.
So to make the first letter capital, you can just use
.placeholder-ele-Casing::placeholder {
text-transform: capitalize;
}
which will convert "mobile number" to "Mobile Number", but will not work for the text "mOBile number", to achieve this you need javascript.
answered Dec 28 '18 at 9:03
Pawan KumarPawan Kumar
1,026111
Thanks for reply. If it will not work as you said... So, how can I apply first letter css on placeholder input. Waiting for reply.
– Anupam Maurya
Dec 28 '18 at 10:14
As I mentioned in the last line of my answer, JavaScript is needed to achieve this. If you want I will add JavaScript code for the same.
– Pawan Kumar
Dec 30 '18 at 21:07
Yes, if possible try to search placeholder and first letter pseudo class of css. Highly recommended to read. And this first-letter pseudo class is not working for updated browsers.
– Anupam Maurya
Dec 31 '18 at 4:56
I know about both of the pseudo elements, and first-letter was pseudo class previously now it is pseudo element.
– Pawan Kumar
Dec 31 '18 at 8:54
But currently it is deprecated for updated chrome browser.::first-letterpseudo class element for::placeholderTry to understand, all I am talking about input placeholder text, and applying::first-letterpseudo class into in it. But it is not working only because it is deprecated.
– Anupam Maurya
Dec 31 '18 at 10:22
add a comment |
1
Your compiled CSS will be like
.placeholder-ele-Casing::placeholder {
text-transform: lowercase !important;
}
.placeholder-ele-Casing::placeholder::first-letter { /*will not work*/
text-transform: uppercase !important;
}
::placeholderand::first-letterboth are pseudo elements, so you
can't append the pseudo element after pseudo element while
Pseudo-classes are allowed anywhere.
So to make the first letter capital, you can just use
.placeholder-ele-Casing::placeholder {
text-transform: capitalize;
}
which will convert "mobile number" to "Mobile Number", but will not work for the text "mOBile number", to achieve this you need javascript.
answered Dec 28 '18 at 9:03
Pawan KumarPawan Kumar
1,026111
Thanks for reply. If it will not work as you said... So, how can I apply first letter css on placeholder input. Waiting for reply.
– Anupam Maurya
Dec 28 '18 at 10:14
As I mentioned in the last line of my answer, JavaScript is needed to achieve this. If you want I will add JavaScript code for the same.
– Pawan Kumar
Dec 30 '18 at 21:07
Yes, if possible try to search placeholder and first letter pseudo class of css. Highly recommended to read. And this first-letter pseudo class is not working for updated browsers.
– Anupam Maurya
Dec 31 '18 at 4:56
I know about both of the pseudo elements, and first-letter was pseudo class previously now it is pseudo element.
– Pawan Kumar
Dec 31 '18 at 8:54
But currently it is deprecated for updated chrome browser.::first-letterpseudo class element for::placeholderTry to understand, all I am talking about input placeholder text, and applying::first-letterpseudo class into in it. But it is not working only because it is deprecated.
– Anupam Maurya
Dec 31 '18 at 10:22
add a comment |
1
1
1
Your compiled CSS will be like
.placeholder-ele-Casing::placeholder {
text-transform: lowercase !important;
}
.placeholder-ele-Casing::placeholder::first-letter { /*will not work*/
text-transform: uppercase !important;
}
::placeholderand::first-letterboth are pseudo elements, so you
can't append the pseudo element after pseudo element while
Pseudo-classes are allowed anywhere.
So to make the first letter capital, you can just use
.placeholder-ele-Casing::placeholder {
text-transform: capitalize;
}
which will convert "mobile number" to "Mobile Number", but will not work for the text "mOBile number", to achieve this you need javascript.
answered Dec 28 '18 at 9:03
Pawan KumarPawan Kumar
1,026111
Your compiled CSS will be like
.placeholder-ele-Casing::placeholder {
text-transform: lowercase !important;
}
.placeholder-ele-Casing::placeholder::first-letter { /*will not work*/
text-transform: uppercase !important;
}
::placeholderand::first-letterboth are pseudo elements, so you
can't append the pseudo element after pseudo element while
Pseudo-classes are allowed anywhere.
So to make the first letter capital, you can just use
.placeholder-ele-Casing::placeholder {
text-transform: capitalize;
}
which will convert "mobile number" to "Mobile Number", but will not work for the text "mOBile number", to achieve this you need javascript.
answered Dec 28 '18 at 9:03
Pawan KumarPawan Kumar
1,026111
answered Dec 28 '18 at 9:03
Pawan KumarPawan Kumar
1,026111
answered Dec 28 '18 at 9:03
Pawan KumarPawan Kumar
1,026111
answered Dec 28 '18 at 9:03
Pawan KumarPawan Kumar
1,026111
1,026111
Thanks for reply. If it will not work as you said... So, how can I apply first letter css on placeholder input. Waiting for reply.
– Anupam Maurya
Dec 28 '18 at 10:14
As I mentioned in the last line of my answer, JavaScript is needed to achieve this. If you want I will add JavaScript code for the same.
– Pawan Kumar
Dec 30 '18 at 21:07
Yes, if possible try to search placeholder and first letter pseudo class of css. Highly recommended to read. And this first-letter pseudo class is not working for updated browsers.
– Anupam Maurya
Dec 31 '18 at 4:56
I know about both of the pseudo elements, and first-letter was pseudo class previously now it is pseudo element.
– Pawan Kumar
Dec 31 '18 at 8:54
But currently it is deprecated for updated chrome browser.::first-letterpseudo class element for::placeholderTry to understand, all I am talking about input placeholder text, and applying::first-letterpseudo class into in it. But it is not working only because it is deprecated.
– Anupam Maurya
Dec 31 '18 at 10:22
add a comment |
Thanks for reply. If it will not work as you said... So, how can I apply first letter css on placeholder input. Waiting for reply.
– Anupam Maurya
Dec 28 '18 at 10:14
As I mentioned in the last line of my answer, JavaScript is needed to achieve this. If you want I will add JavaScript code for the same.
– Pawan Kumar
Dec 30 '18 at 21:07
Yes, if possible try to search placeholder and first letter pseudo class of css. Highly recommended to read. And this first-letter pseudo class is not working for updated browsers.
– Anupam Maurya
Dec 31 '18 at 4:56
I know about both of the pseudo elements, and first-letter was pseudo class previously now it is pseudo element.
– Pawan Kumar
Dec 31 '18 at 8:54
But currently it is deprecated for updated chrome browser.::first-letterpseudo class element for::placeholderTry to understand, all I am talking about input placeholder text, and applying::first-letterpseudo class into in it. But it is not working only because it is deprecated.
– Anupam Maurya
Dec 31 '18 at 10:22
Thanks for reply. If it will not work as you said... So, how can I apply first letter css on placeholder input. Waiting for reply.
– Anupam Maurya
Dec 28 '18 at 10:14
Thanks for reply. If it will not work as you said... So, how can I apply first letter css on placeholder input. Waiting for reply.
– Anupam Maurya
Dec 28 '18 at 10:14
As I mentioned in the last line of my answer, JavaScript is needed to achieve this. If you want I will add JavaScript code for the same.
– Pawan Kumar
Dec 30 '18 at 21:07
As I mentioned in the last line of my answer, JavaScript is needed to achieve this. If you want I will add JavaScript code for the same.
– Pawan Kumar
Dec 30 '18 at 21:07
Yes, if possible try to search placeholder and first letter pseudo class of css. Highly recommended to read. And this first-letter pseudo class is not working for updated browsers.
– Anupam Maurya
Dec 31 '18 at 4:56
Yes, if possible try to search placeholder and first letter pseudo class of css. Highly recommended to read. And this first-letter pseudo class is not working for updated browsers.
– Anupam Maurya
Dec 31 '18 at 4:56
I know about both of the pseudo elements, and first-letter was pseudo class previously now it is pseudo element.
– Pawan Kumar
Dec 31 '18 at 8:54
I know about both of the pseudo elements, and first-letter was pseudo class previously now it is pseudo element.
– Pawan Kumar
Dec 31 '18 at 8:54
But currently it is deprecated for updated chrome browser.
::first-letter pseudo class element for ::placeholder Try to understand, all I am talking about input placeholder text, and applying ::first-letter pseudo class into in it. But it is not working only because it is deprecated.– Anupam Maurya
Dec 31 '18 at 10:22
But currently it is deprecated for updated chrome browser.
::first-letter pseudo class element for ::placeholder Try to understand, all I am talking about input placeholder text, and applying ::first-letter pseudo class into in it. But it is not working only because it is deprecated.– Anupam Maurya
Dec 31 '18 at 10:22
add a comment |
0
USE THIS CSS CODE
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
text-transform: initial;
}
::-moz-placeholder { /* Firefox 19+ */
text-transform: initial;
}
:-ms-input-placeholder { /* IE 10+ */
text-transform: initial;
}
:-moz-placeholder { /* Firefox 18- */
text-transform: initial;
}
answered Dec 28 '18 at 8:03
MohcinBNMohcinBN
1867
Thanks @MohcinBN here my use case is different... And first-letter pseudo class is get in deprecated in new browser. Let me know the way if found.
– Anupam Maurya
Dec 28 '18 at 10:15
add a comment |
0
USE THIS CSS CODE
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
text-transform: initial;
}
::-moz-placeholder { /* Firefox 19+ */
text-transform: initial;
}
:-ms-input-placeholder { /* IE 10+ */
text-transform: initial;
}
:-moz-placeholder { /* Firefox 18- */
text-transform: initial;
}
answered Dec 28 '18 at 8:03
MohcinBNMohcinBN
1867
Thanks @MohcinBN here my use case is different... And first-letter pseudo class is get in deprecated in new browser. Let me know the way if found.
– Anupam Maurya
Dec 28 '18 at 10:15
add a comment |
0
0
0
USE THIS CSS CODE
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
text-transform: initial;
}
::-moz-placeholder { /* Firefox 19+ */
text-transform: initial;
}
:-ms-input-placeholder { /* IE 10+ */
text-transform: initial;
}
:-moz-placeholder { /* Firefox 18- */
text-transform: initial;
}
answered Dec 28 '18 at 8:03
MohcinBNMohcinBN
1867
USE THIS CSS CODE
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
text-transform: initial;
}
::-moz-placeholder { /* Firefox 19+ */
text-transform: initial;
}
:-ms-input-placeholder { /* IE 10+ */
text-transform: initial;
}
:-moz-placeholder { /* Firefox 18- */
text-transform: initial;
}
answered Dec 28 '18 at 8:03
MohcinBNMohcinBN
1867
answered Dec 28 '18 at 8:03
MohcinBNMohcinBN
1867
answered Dec 28 '18 at 8:03
MohcinBNMohcinBN
1867
answered Dec 28 '18 at 8:03
MohcinBNMohcinBN
1867
1867
Thanks @MohcinBN here my use case is different... And first-letter pseudo class is get in deprecated in new browser. Let me know the way if found.
– Anupam Maurya
Dec 28 '18 at 10:15
add a comment |
Thanks @MohcinBN here my use case is different... And first-letter pseudo class is get in deprecated in new browser. Let me know the way if found.
– Anupam Maurya
Dec 28 '18 at 10:15
Thanks @MohcinBN here my use case is different... And first-letter pseudo class is get in deprecated in new browser. Let me know the way if found.
– Anupam Maurya
Dec 28 '18 at 10:15
Thanks @MohcinBN here my use case is different... And first-letter pseudo class is get in deprecated in new browser. Let me know the way if found.
– Anupam Maurya
Dec 28 '18 at 10:15
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53955279%2fhtml-input-placeholder-first-letter-css-changes-is-not-working-with-updated-bro%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
