Заполнитель ввода HTML, изменения CSS первой буквы не работают в обновленном браузере
Я применяю css для первой буквы в заполнителе ввода
Я попытался добавить псевдокласс :: first-letter, чтобы получить то же самое. Но мой браузер обновлен, поэтому изменения здесь не отражаются в обновленном браузере.
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' />
Здесь я использовал заполнитель, чтобы получить правильный регистр предложений.
Как этот «Мобильный номер».
Но я нашел только преобразование текста в нижний регистр ... не элемент из первой буквы ...
Ответы 3
ИСПОЛЬЗУЙТЕ ЭТОЙ КОД CSS
::-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;
}
Ваш скомпилированный CSS будет похож на
.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.
Итак, сделать первую букву заглавной, вы можете просто использовать
.placeholder-ele-Casing::placeholder {
text-transform: capitalize;
}
который преобразует «мобильный номер» в «мобильный номер», но не будет работать с текстом «номер мобильного телефона», для этого вам понадобится javascript.
Спасибо за ответ. Если это не сработает, как вы сказали ... Итак, как я могу применить первую букву css к вводу заполнителя. Жду ответа.
Как я уже упоминал в последней строке своего ответа, для этого необходим JavaScript. Если хотите, я добавлю для этого код JavaScript.
Да, если возможно, попробуйте выполнить поиск по заполнителю и псевдоклассу по первой букве CSS. Настоятельно рекомендуется прочитать. И этот псевдокласс с первой буквы не работает в обновленных браузерах.
Я знаю об обоих псевдоэлементах, и первая буква была псевдоклассом раньше, теперь это псевдоэлемент.
Но в настоящее время он устарел для обновленного браузера Chrome. Элемент псевдокласса ::first-letter для ::placeholder Попытайтесь понять, все, что я говорю о вводимом тексте-заполнителе и применении в нем псевдокласса ::first-letter. Но он не работает только потому, что устарел.
Вы можете использовать начальные стили заполнителя
.placeholder-ele-Casing {
text-transform: lowercase;
}
&::placeholder{
text-transform: initial;
}
Спасибо @MohcinBN, здесь мой вариант использования другой ... И псевдокласс с первой буквой устарел в новом браузере. Сообщите мне дорогу, если найдете.