Change color of one character in a text box HTML/CSS [duplicate]

I’m designing a web site and i would like to ask you guys that, how can I change the color of just one character in a string in a text box of HTML by CSS? example : STACK OVER FLOW just the ‘A’ letter is red!

That’s impossible unless you create a rich text custom textbox kind of thing. In a normal textbox( ) it is not possible.

8 Answers 8

You can’t do this with a regular or element, but with a normal element (like or

) made contenteditable , you have all the freedoms of html/css formatting.

@AliSajid As stated above, you simply cannot. However, the code example does result in an editable field, so you can style it to look and act like a regular if you like.

I can’t believe no one has suggested this yet. But if you’re ok with a WebKit only solution, you can make a color gradient with discrete separations and apply it to the text like this:

 
STACK OVER FLOW
 This is what the gradient looks like with the text over it: 
STACK OVER FLOW
 It even works on input forms, however you'll want to change the font to a Monospaced font like Courier so the color always lines up with the same letter: 

This is nice because it’s not limited by the tag the text is placed in like some of the other answers. And if you’re in a situation where you can’t really change the html (for instance if you’re using the same style sheet on multiple pages and need to make a retroactive change) this could be helpful. If you can change the html though, xec’s answer has much better browser support.

Источник

Как использовать символы Unicode в CSS

Для использования символов Unicode в CSS первым делом нужно объявить соответствующую кодировку; рекомендуется UTF-8. Это делается с помощью так называемого эт-правила @charset в самом начале файла, то есть первой строкой:

Синтаксис: сначала указывается @charset ; затем — ровно ОДИН пробел; затем — имя кодировки в ДВОЙНЫХ кавычках; затем — точка с запятой. Синтаксис должен быть точно таким, как указан здесь, Это ВАЖНО, так как иначе будет ошибка. То есть нельзя использовать между @charset и названием кодировки больше или меньше одного пробела; нельзя заключать имя кодировки в одинарные кавычки; обязательно нужно ставить точку с запятой в конце; также ничего нельзя писать ПЕРЕД @charset , включая комментарии, то есть первым символом в файле должен быть «эт» (@; «собака», по-нашему).

Однако одного обявления кодировки мало: нужно чтобы и само содержимое файла стилей было закодировано в объявленой кодировке. Что это значит.
Эт-правилом @charset мы просто указываем браузеру какой алгоритм кодирования ему нужно использовать, чтобы правильно прочесть содержимое файла, однако само содержимое может быть закодировано по другому алгоритму и тогда, как вы понимаете, браузер обработает файл некорректно. Обычно в большинстве редакторов кода текущая кодировка файла вместе с другой полезной информацией отображается в строке статуса (в нижней части окна), а изменить её можно через меню — эта возможность есть, поищите; описывать в данном посте где именно она находится для всех редакторов, коих сотни, а то и тысячи, по понятным причинам я не стал; если не найдёте, напишите мне — я вам подскажу.

Если вы будете изменять кодировку файла, то учтите, что в некоторых редакторах может быть два пункта меню, которые могут сбить вас с толку: Кодировать в
.
Преобразовать в Нужно выбрать именно Преобразовать в .

На самом деле указывать кодировку в файле стилей необязательно ЕСЛИ она обявлена в HTML-документе, но ещё раз напомню: кодировка содержимого файла должна совпадать с объявленной. Это, кстати, касается не только CSS, но и абсолютно любых других областей — ведь если вы говорите, что следующие данные нужно обработать по алгоритму указанной кодировки, то вы же и должны предоставить закодированные этим же алгоритмом данные.

Я так заостряю ваше внимание на том, что помимо объявления кодировки нужно чтобы и данные были в той же кодировке, так как на этом очень часто спотыкаются и не понимают почему всё в кракозябрах.

Тем не менее, хоть и кодировку в файле стилей объявлять необязательно ЕСЛИ она обявлена в HTML-документе, как я уже сказал выше, всё равно лучше это сделать, так как мало ли что ☺:

Рекомендую ВСЕГДА ВЕЗДЕ объявлять кодировки и использовать, по крайней мере в Web’е, именно UTF-8!

Использование символов Unicode в свойстве Content

Рассмотрим CSS-свойство content , которое используется совместно с псевдоэлементами ::before и ::after . В данном свойстве указывается контент, который будет помещён перед или после элемента, к которому применяется соответствующий псевдоэлемент:

selector::before, selector::after < content: "строка"; >

строка любой набор символов, который выводится как есть, кроме экранированных последовательнойстей (см. далее).

Пример использования свойства Content

Контент, добавленный с помощью свойства content не выделяется курсором мыши и не копируется в буфер обмена.

Пример использования символов Unicode в свойстве Content

Допустим, нужно вывести с помощью свойства content после некоторого элемента смайлик (☺), который имеет номер в Unicode u+263a ; это запишется так:

То есть номер символа в Unicode нужно просто проэкранировать обратным слешем (\).
Также отмечу — впередистоящие нули можно не указывать: \0030 идентично \30 .

Второй способ — это указать символ непосредственно:

Чтобы добавляемые через content пробельные символы Unicode (пробелы, табуляции и переводы строк) отображались как есть (имеется в виду предварительное форматирование), для элемента должно быть определено свойство white-space со значением pre или подобным ему.

Некоторые символы Unicode

#	Название по-русски	Название по-английски	Вид	Мнемоника	HTML-код	Unicode
1	Горизонтальная табуляция	Horizontal Tabulation		u+0009
2	Перевод строки (разделитель строк в Unix)	New Line (Nl)		u+000a
3	Вертикальная табуляция	Vertical Tabulation		u+000b
4	Пробел	Space		u+0020
5	Двойная кавычка (универсальная)	Quotation Mark	«	"	"	u+0022
6	Амперсанд	Ampersand	&	&	&	u+0026
7	Апостроф (одинарная кавычка)	Apostrophe	‘	'	'	u+0027
8	Знак меньше	Less-Than Sign		<	<	u+003c
9	Знак больше	Greater-Than Sign	>	>	>	u+003e
10	Неразрывный пробел	No-Break Space			u+00a0

К слову, заметим, что мнемоники (частично) соответствуют названию символа по-английски; пример:   — N o- B reak SP ace.

Источник

Style certain characters with CSS

I’m assuming it’s not possible, but just in case it is or someone has a nice trick up their sleeves, is there a way to target certain characters using CSS? For example make all letters z in paragraphs red, or in my particular case set vertical-align:sup on all 7 in elements marked with the class chord .

Yeah, doing it on the backend is my fallback solution which will be ok, but would’ve preferred it if there was a clean CSS solution

Looks it’s possible to use custom fonts specific to certain (unicode code-point-specified) characters via @font-face , which might be close. and possibly combined with the font-style descriptor to do exactly what OP wants.

6 Answers 6

Hi I know you said in CSS but as everybody told you, you can’t, this is a javascript solution, just my 2 cents.

 
Let's go Zapata let's do it for the revolution, Zapatistas.
 

jQuery.fn.highlight = function (str, className) < var regex = new RegExp(str, "gi"); return this.each(function () < this.innerHTML = this.innerHTML.replace(regex, function(matched) " + matched + "";>); >); >; $("p").highlight("Z","highlight"); 

Result

This is a great solution – Any chance you could update the regex so it does not target the character within attributes? It’s breaking a link’s href attribute because there’s a matching character in the URL linked to. Thanks!

Yes, when applied to paragraphs. Looks like I avoided the issue by only hitting capital V instead of all v characters, and making sure there were no capital V in any links. I used this to tighten awkward kerning/letter-spacing.

I think regular expressions are an extremely brittle solution here: what if you the str you’re replacing happens to also occur in interior markup?

Let’s go Zapata (or, highlight(‘m’,…) which would match the m from any em tags etc) Hence the adage «if you have a problem, and solve it with regexps, you now have two problems» 🙁

That’s not possible in CSS. Your only option would be first-letter and that’s not going to cut it. Either use JavaScript or (as you stated in your comments), your server-side language.

Seems the answer would be no , yes 🙂 I’ll accept this when I’m allowed to. I’m already parsing chords in the backend so just have to adjust the output. Just wondered if there was a way the output could remain instead of , which is quite a number of characters just to style two characters :p

@Svish Yeah it is pretty hefty, but you are styling chords so that’s never going to be the most straightforward thing to achieve :). Hey, don’t let a couple of extra span tags ruin your chords 🙂

@Svish Since you have only two letters to style, I suppose using both and first-letter you could could accomplish what you want.

@xpy that would work if all songs only consisted of B7 chords 😉 Unfortunately the 7 can be in a lot of different places and what comes after the first letter can be, and usually is, something else than a 7 :/

I may be pushing this a lot but, you could also do something like B7 and the you could select any chord to style with [data-chord] , [data-chord^=b] , [data-chord$=7] , etc.

The only way to do it in CSS is to wrap them in a span and give the span a class. Then target all spans with that class.

In reply to @ncubica but too long for a comment, here’s a version that doesn’t use regular expressions and doesn’t alter any DOM nodes other than Text nodes. Pardon my CoffeeScript.

# DOM Element.nodeType: NodeType = ELEMENT: 1 ATTRIBUTE: 2 TEXT: 3 COMMENT: 8 # Tags all instances of text `target` with @contents().each (index)-> jthis = $ @ switch @.nodeType when NodeType.ELEMENT jthis.tag target, css_class when NodeType.TEXT text = jthis.text() altered = text.replaceAll target, " ($ 'div#page').tag '⚀', 'die' 

Источник