currentColor в CSS


One more step

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 53405225dfa48e53 • Your IP : 188.64.174.135 • Performance & security by Cloudflare

Keeping current with CSS currentColor

If you’re familiar with Sass or LESS then you’re apt to use preprocessor variables to parameterize the dimensions and colors of a site stylesheet. However, going as far back as IE 9, CSS has included a feature keyword, currentColor , that allows for some simple yet powerful color cascades.

Basics

currentColor is a CSS keyword that enabled more DRY (Don’t Repeat Yourself) stylesheets. It can be used wherever a color value is expected (i.e. background-color , border-color , outline-color , box-shadow , etc). Here’s a simple example on an input:

In the above example, the input’s box-shadow matches its text color, which is only defined in one place. If you haven’t set color on the element referencing currentColor , it will be inherited from a parent element. If no ancestor has color set, then it will inherit from the browser default (usually black).

Accent Color

So why use currentColor ?

In short, you can define a default color on a common ancestor like body or a .container utility >color . In the example above, I show you can even use CSS gradients with currentColor !

SVG Icons & currentColor Fill

Another common use of currentColor is for SVG icons defined with the symbol element. Chris Coyier has a great example on Codepen:

Here currentColor is used to penetrate the Shadow DOM and override the color of SVG icons. This allows for icons to be defined once and to override the color as needed. For more info, check out Cascading SVG Fill Color.

Compatibility

CSS currentColor goes back to IE 9 and includes more than 97% of browsers, so its use should be suitable for most projects.

«currentColor», the first CSS variable

Apr 29 ・7 min read

The recent addition to CSS of Custom Properties, a.k.a. CSS variables, was a very welcome addition to the language. It’s opened the door for a lot of really cool techniques; there’s a lot that you can only do when you can keep track of the state of your system and keep different bits in sync with each other, and variables give you a way to do that.

But here’s something that developers newer to CSS may not know, and those who’ve been around often forget: we’ve actually had another variable in CSS since long before Custom Properties came on the scene. It’s much simpler, and limited in scope, so it can’t do everything Custom Properties can do, but it’s way better supported, and with a bit of cleverness it can be used to accomplish some pretty cool stuff.

This variable is the special CSS keyword currentColor !

What is it?

The currentColor keyword is basically what it sounds like: it’s a special keyword that holds the value of the color property at the location where it’s used.

So for a very simple example, you can use it to make a pull quote box with a border that’s the same color as the text in the box:

Interestingly though, in this particular case, the border-color rule is unnecessary. I always thought that the default border-color value was black , or else was set by the browser, but I recently discovered by accident that it actually defaults to currentColor ! So if border-color just isn’t specified, it will use hotpink by default!

Several properties actually default to currentColor :

By the way, I didn’t know about almost any of those rules before I looked up which rules default to currentColor ! I need to read more about text-emphasis ; it’s really weird and interesting. Man, every time I dive into the docs to find something specific, I end up learning about something unexpected.

Browser support

Of course, the first question you should ask whenever you learn about a cool feature of the web platform that you’ve never seen before is, «How good is its browser support? Can I actually use it?» Fortunately, the answers for currentColor are «super good» and «yes!»

Support actually goes back a really long time. Taking a look at caniuse.com’s overview of support, it’s supported in every version of Edge, it’s been in Chrome and Safari since version 4 (back then they used the same engine under the hood), and it’s been in Firefox since version 2! Heck, it’s even in Internet Explorer all the way back to IE 9! So don’t worry about using it unless you’re writing an intranet application for an organization that still hasn’t upgraded past IE 8. (Tragically, I’m very aware that they still exist ��)

Demo: Badges

Okay, let’s get practical.

I discovered currentColor while investigating the best way to implement a design for work. I needed to create a row of colored badges, each with a label on the badge and a numeric counter next to it. The background color of each badge matched the text color of its counter, and the label on each badge was colored to match the site background. For the sake of example, suppose the mockup was something like this:

Each of those badges is identical, but for the color. Seems like a good use case for a reusable component! In a modern browser, you could use a CSS variable for the background of the badge and the foreground text color of its counter. But suppose you want/need to support IE 11, Edge 12-14, or another browser that doesn’t support custom properties. Or maybe you already have some utility classes in your CSS to define text colors for various situations, like Bootstrap’s contextual color classes, e.g. .text-danger and .text-warning , so the idea of using the color property to set the badge color is super convenient. How might you go about it, armed with your new knowledge of currentColor ?

First we’ll need a root wrapper element for the component. This is where the color will be set, and it’s where you’d add a class to override the color.

So what needs to be inside the badge component? Well, at first glance there are two regions: the bit with a colored background and white text, which I’ll call the title block, and the digits off to the side that are colored to match the title block’s background, which we’ve been calling the counter.

The title block definitely needs its own block in the DOM, since it has a background color, but the counter probably doesn’t, since it’s just sitting off to the side, which is what inline text does anyway. So lets try this markup:

Now the fun part! We want the background of the .title-block to match the color specified on the .badge , so we can use background: currentColor ! We also want to set the .title-block ‘s text to white, according to our mockup, so let’s add color: white as well. (If you’ve spotted the problem here, no spoilers!)

Илон Маск рекомендует:  Что такое код offsetrgn

Great! Let’s see how it looks:

Ah. Well. That’s not what we wanted at all. The title block seems to be missing. or rather, it’s completely white. Why is that?

Well, here’s the thing: CSS is a declarative language, not an imperative one: it doesn’t run top-to-bottom, keeping and updating state along the way. What this means is that when we write:

the browser doesn’t figure out currentColor ‘s value, then set color: white . Instead, setting color: white changes the value of currentColor for the background to white as well! This is a limitation of currentColor that you need to keep in mind.

It’s an easy enough fix, if a little annoying. We just need another layer of nesting to encapsulate the color: white rule. CSS rules often inherit downward to children, but never upward to parents, so this lets .title-block inherit its currentColor value from .badge , while being able to change the color within its child.

Now let’s take another look:

Now that we’ve got our component, all we need to do is repeat it a few times and define a color-override class for each be instance.

Awesome! We met the requirement!

And this little badge component is pretty handy; there’s still more to play with. We can try different colors, put emoji in the title area, add a background color to the counter area. Lots of possibilities!

What else can you come up with?

Conclusion

To recap: there’s a cool, undervalued keyword in CSS, currentColor , that can be used as a variable of sorts for certain use cases. It has much more broad support than CSS Custom Properties (a.k.a. CSS variables), and it is perhaps a bit more intuitive to use when developing a reusable component, since you only need to set the color property to populate it’s value, which feels very nice.

However, it’s clear that currentColor has limitations. The most glaring when comparing to Custom Properties is that it’s only a color value, so it can’t be used to store length values, image URLs, or fancy gradients. The other main point of caution is that you can’t use an inherited color value in currentColor , say for the background or border color, while also setting your own color for text in the same block; setting color will update the value of currentColor everywhere within that block. You need to introduce a child element to keep your color value in a new scope.

So in short, it has limits and caveats, but I personally have found currentColor to be very useful, and it has let me write much cleaner code in a few tricky situations. My absolute favorite feature is just being able to set color on a root element of a component and see the whole thing update. Give it a try, see what you can do with it!

CSS currentColor

пример

currentColor возвращает вычисленное значение цвета текущего элемента.

Использовать в одном элементе

Здесь currentColor оценивается как красный, поскольку свойство color установлено на red :

В этом случае указание currentColor для границы, скорее всего, избыточно, так как исключение должно давать идентичные результаты. Используйте свойство currentColor внутри свойства border внутри одного и того же элемента, если оно будет перезаписано иначе из-за более конкретного селектора.

Так как это вычисленный цвет, граница будет зеленой в следующем примере из-за второго правила, переопределяющего первое:

Унаследовано от родительского элемента


Цвет родителя наследуется, здесь currentColor оценивается как «синий», делая синий цвет дочернего элемента.

currentColor также может использоваться другими правилами, которые обычно не наследуются от свойства цвета, такого как фоновый цвет. В приведенном ниже примере показано, как дети используют цвет, установленный в родительском в качестве фона:

Understanding the currentColor Keyword in CSS

Now that that we have custom properties in CSS, we pretty much have full power over our own variables in CSS. But even before those become helpful, we can use a keyword available since the CSS Color Module Level 3, currentColor , to keep colors consistent within elements.

currentColor acts like a variable for the current value of the color property on the element. And the Cascading part of CSS is still effective, so if there’s no defined color property on an element, the cascade will determine the value of currentColor .

Alligator.io recommends

Usage

currentColor is useful when you want a certain color to be consistent in an element. For example, if you want an element to have a border color that’s the same as the element’s text color, using currentColor makes a lot of sense because then if you decide the main text color you can change the value at only one place.

An Example

Words are all well and good, but nothing beats an example! Let’s make use of currentColor at a few different places in a simple example. You’ll see how currentColor can also be really useful as the value for the fill properties of SVGs.

Here’s what our final example looks like (hover over it if you can):

First, our markup:

As you can see, there’s nothing fancy going on with the markup, just an outer div and a simple SVG graphic in it.

The magic ✨ happens in the CSS styles:

What’s more, the value for color can just a well be a CSS variable and currentColor will still end up with our expected value:

The markup is basically the same, except for an additional class on the outer circle:

And then in the styles we overr >.outer-circle and use the value of one of the CSS variables available on this site instead:

Wrapping Up

Your mileage with currentColor may vary, because many properties that include a color will default to the current value of color anyway ( border , box-shadow , text-decoration …). Add that to the fact that we now have full blown CSS variables, you may find that you don’t pull currentColor from your bag of tricks very often these days. Still though, it’s there if the need ever arrises. It can become especially helpful to make sure SVG icons are filled with the same color as the current text color.

Extending the Color Cascade with the CSS currentColor Variable

Adobe Products in this article

If you use Sass or LESS, then you probably already use variables in your style sheets and know how useful they are. If you don’t use a preprocessor, then you might be curious what the fuss is all about and why variables are so popular and how they can be useful. In this article, we’re going to get an overview of why variables are useful, and get acquainted with one particular variable: currentColor .

What are variables good for?

Variables in CSS are useful because they allow us to write more DRY (Don’t Repeat Yourself) code. They are also particularly useful for managing and maintaining large-scale projects that contain a lot of repeated values.

One of the most common use cases for variables are color themes/schemes throughout a website or application. With variables, creating and managing color schemes across a CSS document becomes a lot easier. For example, color schemes usually require you to reuse a few color values for different properties in the CSS file. If you want to change the primary color of a scheme, you would normally have to change all occurrences of that color in the style sheet. Using CSS variables, you can define a variable in one place (for example a variable named “primary-color”), assign a color value to it, and then use the variable as a value anywhere you want in the style sheet. Then, when the time comes to change this color, all you would have to do is assign it a different color value, and all occurrences of that variable in the style sheet will be automatically updated.

CSS 2.1 did not introduce variables. (Although, that’s not entirely true, as you will see in this article.) In 2014, native CSS variables that are similar to preprocessor variables were introduced; these variables are arguably even more capable than preprocessor variables. A CSS variable is accepted as a value by all CSS properties.

In addition to the new variables, CSS already comes with a keyword value that is practically also a variable: the currentColor keyword.

Илон Маск рекомендует:  Что такое код swfdisplayitem >move

The currentColor keyword

The currentColor keyword is like a CSS variable, except that it has one main restriction: you can only use it where a value is expected; if a property does not accept a value, it will not accept currentColor as a value.

The following are all examples of using currentColor in properties that accept it as a value.

Another difference between currentColor and other variables is that you don’t get to assign a value to it the same way you would assign other variables values. The value of currentColor is determined by the computed value of the color property that is currently being used on the element. That is, the value of currentColor is equal to the current color property value. And this is where the currentColor name comes from.

So, if we were to go back to our previous example, the currentColor keyword sets the box shadow color to whatever color value you have set on the div . If you haven’t set any color , it will use the inherited color from any of the div ’s ancestors. If no ancestor has a color , most browsers will just default to black.

Put another way: the currentColor keyword is used to make properties of an element, or child elements of an element, inherit the color set by the element’s color property. It therefore acts as the inherit value to allow inheritance of a color that would otherwise not be inherited by a property or child element.

This also means that, for properties that already inherit the color value, currentColor will not be of much use.

Properties and elements that inherit the color value by default

When an element has a color value, whether it is explicitly set or inherited, some of the foreground elements of that element that accept a value will inherit that color value by default.

For example, an element’s borders are part of the element’s foreground; thus, even if you don’t specify a border color, the border will get the same color as the color property value. If the element does not have one, most browsers usually default to black.

The border color in this example will be purple:

The elements that will get/inherit the element’s color value include:

  • The element’s text—it is what the color property is used for.
  • The text’s outline.
  • The element’s border.
  • The element’s box shadow.
  • An img ’s alt text. That is, when the image cannot be displayed, the text that appears in its stead will have that color value.
  • A list item’s bullet(s) and border.
  • In some browsers (e.g Chrome) the horizontal rule’s (
    ) border color. (Without a border, the color will not be affected.)

When you set these element’s properties on an element without explicitly assigning them a color, they will inherit the computed color value of the element by default.

The following demo shows the above elements in action as they inherit the color set on the page’s body . Change the color property value on the body to see these elements’ colors also change.

At this point, you might be wondering: if so many properties/elements already inherit the color value, how or where can currentColor be useful? В

Extending color inheritance with currentColor

There are some places where retrieving the color value and using it could come in handy. One example where currentColor can be used that would not otherwise inherit the color value is gradients. CSS gradient images, be that linear or radial gradients, do not inherit colors. By using currentColor , you can make a linear gradient used as a background image, for example, adjust to match any color you specify somewhere else as the “primary color” of a theme.

Such an example was created by Scott Kellum who took this concept a little further and added an animation to the color property. As the color property animates, all the elements affected by that color will also animate their colors. В See the Pen currentColor by Scott Kellum (@scottkellum) on CodePen.

This is a great example of using currentColor , particularly the animation part.

However, more practical examples for currentColor exist. Let’s take a look at some of them.

currentColor Use Cases

The idea behind currentColor is to extend the color cascade. This comes in handy in a lot scenarios.

currentColor for theming UI components

From the previous demo, we can move to a more practical (and brilliant, I must say) use case for currentColor demonstrated by Simon “Simurai” in a talk he gave at CSSConfau last year. The talk was about how we can use Flexbox, currentColor and em units inside UI components to quickly style entire Web Apps straight in the browser.

To demonstrate the usefulness of currentColor , Simon created a set of UI elements, including some sliders. These elements have the same color scheme applied. For coloring the sliders and input types, he used the currentColor variable to force the color inheritance in the background color of the slider’s thumb and checkboxes that would otherwise not inherit that color.

Similarly, more UI components can be created that inherit a color value that you would specify somewhere up in the cascade. With this, a UI theme is established on these components. Then, leveraging the cascade and currentColor , you can change the main color value and get a new set of colored components every time you do, thus practically automating the process.

The following GIF image shows that in action. Simon is using the browser devtools and the color picker in the browser to change the value of the color property, and get a live preview of these changes on the components.

Using the browser’s devtools capabilities, you would be able to change the theme to your liking and then save the changes to your working files right from the browser. To learn all about it, refer to Simon’s talk and blog post.

currentColor for theming and styling SVG

SVGs are great, but they come with a few styling quirks and limitations depending on how you use them. One such case is reusing parts of an SVG using the SVG element.


If you’re not familiar with the element, you can read all about it here. The idea behind is to reuse parts of an SVG anywhere we want these parts to appear on the page. By use ing an SVG element, we’re practically creating a live copy of that element. This is similar to copy-pasting the element in a graphics editor, except that the copy is live—meaning that its characteristics can change as the original copy changes.

The element is used a lot when creating SVG sprites. An SVG containing all of the icons would be used as the sprite, and then we can insert individual icons from that sprite anywhere on the page, using . You can read all about SVG creating sprites in this article.

When an element is use d, however, the copy of its contents is cloned into a shadow DOM. This means that these contents cannot be selected and styled with CSS the way we would select and style SVG elements or even HTML elements present in the regular DOM. This is one reason why styling SVG icons created like that is limited.

Using currentColor , we can work around this limitation but allowing a color we specify in CSS “leak” into the contents of the use d SVG, by setting currentColor as a value for the properties we want the color value to leak into.

So with an SVG icon used like so:

And assuming the #home icon defined in the sprite sheet contains something like:

We can then apply styles to the icon and have the fill color cascade down to the #roof (which does not have a fill attribute above) and the color value be inherited by the #bottom rectangle’s fill attribute:

The fill color will cascade down from the svg to use and then to #roof . The color value will be used as a value for the #bottom fill color because of currentColor .

Fabrice Weinberg wrote an article about this technique a while back on his Codepen blog.

This technique comes in handy when you want to create multiple icons each having different colors; all you would have to do in that case is change the color and fill values in the CSS. An example of this usage is the following demo Fabrice shows in his post:

Илон Маск рекомендует:  Тег iframe

See the Pen Sass SVG Icons 1.1KB by Fabrice Weinberg (@FWeinb) on CodePen.

Of course, you can use currentColor on multiple elements inside the SVG. However, as you probably have noticed, this only allows you to change two colors inside the SVG.

If you want to have more control over colors and specify more color values that you could leak into the SVG, you would need more variables; this is where the new CSS Variables specification will come in handy. You can read more about this here.

Final Words

In the previous examples, we saw how we can use currentColor in multiple places, and then change the colors we want in one place and have that color be applied to those multiple places, instead of having created multiple occurances of the same color and then changed all of them. This helps us write shorter CSS, and provides us with some sort of automation, especially in situations like the UI components we saw in Simon’s talk.

With CSS Variables, you will be able to define your own set of variables and use them in similar and much, much more use cases, as the new variables will be valid values for any CSS property, not only those that accept values. Dealing with SVG icons will certainly become easier, as will maintaining large-scale projects. Again, if you use a preprocessor, then you already know how useful variables are.

Can you think of more use cases for currentColor ? If so, make sure you share them in the comments below!

CurrentColor в CSS

The currentColor value refers to the current text color of the element. It can be used on any declaration that accepts a color value.

Example

The border and this link should have the same color as the text.

Note: this test changes the paragraph’s color , and not its border-color ! Still, the border should follow the text color.

The link has color: currentColor , and this should be read as color: inherit . Thus the link color, too, should change with the paragraph color.

The border-bottom of the link is black, but goes to the currentColor when you hover.

Bug in some WebKit-based browsers: once you’ve hovered once, the current color is used for any subsequent hover, even when you change the paragraph’s color.

Отрицание заполнения: currentColor

Есть ли способ отменить или удалить fill: currentColor ?

У меня есть набор значков, созданных с помощью SVG. Некоторые из этих значков содержат встроенный стиль с информацией о цвете. Наиболее распространенный вариант использования — игнорировать эти встроенные заливки и для них наследовать их родительский color , объявив fill: currentColor в CSS. Но в некоторых случаях, как и наш логотип, мы хотели бы, чтобы эти встроенные цвета отображались. В другом месте, скажем, нижнем колонтитуле, мы хотели бы переопределить цвета одним цветом по нашему выбору.

По причинам ™, я застрял с этими классами, которые находятся в библиотеке. Каждый значок имеет класс svg-icon и более конкретный класс, в данном случае iconLogoGlyph .

Как я могу отрицать fill: currentColor , используя только CSS, если я не могу коснуться классов? Я экспериментировал с :not , чтобы выбрать все, кроме .iconLogoGlyph , но это не позволило бы мне использовать fill: currentColor , когда я действительно нуждаюсь в нем.

Что противоположно fill: currentColor ? Это не fill: inherit или fill: none . Мне нужно что-то вроде fill: just grab what in the SVG, yo ��

Есть способ сделать это, если вы немного измените SVG. Если вы вместо этого:

то есть. оберните все заполненные фигуры в группы и укажите заливку в группе, а не на самом пути, затем произойдет следующее:

fill не относится к элементам , поэтому установка этого свойства в группе не повредит (например, вы не получаете вдруг заполненный прямоугольник) и

fill наследуется, и поэтому fill будет применяться к

Затем, если вместо * вы используете *:not(g) в своем CSS (в вашем конкретном примере также будет работать только использование path ), то в случае по умолчанию fill: currentColor укажет путь к использованию текущий цвет (и игнорировать значение заполнения родительской группы). В случае переопределения, где вы устанавливаете fill: inherit , вы указываете путь к возврату к наследованию родительского значения заполнения.

Вам нужно только изменить это SVG на значки, где вы ожидаете, что можете использовать собственные цвета. Значки, которые всегда должны быть заполнены текущим цветом, не нуждаются в изменении.

Понимание css унаследовало currentColor

Мне было интересно узнать о currentColor и о том, как он работает, когда он унаследован и/или используется в других свойствах. Другим аспектом является отсутствие значения цвета в пограничном свойстве, например, которое должно соответствовать текстовому цвету.

Ничего особенного в приведенном выше фрагменте.
Тени и граница имеют тот же цвет, что и текст.

Теперь давайте наследуем цвет:

Resutls:

В IE11 и Chrome 43 только текст-цвет — известь.
В Firefox 38, с другой стороны, тени тоже зеленые. (Обратите внимание не на границу)

При активном настройке всего на currentColor браузеры показывают тот же результат, отображая только текст в лайме, а все остальное — оранжевым. (Как вы можете видеть в последнем фрагменте внизу)

Вопросы:

  • Почему существует разница с границей в Firefox при отключении currentColor
  • Почему наследование не использует значение цвета для одного и того же элемента?
  • Есть ли способ использовать одни и те же свойства и переключать цвет? (для пограничного цвета есть, как вы можете видеть в примере, сбросив его)

Здесь также ссылка dabblet, если вы хотите поиграть с ней:
http://dabblet.com/gist/587ea745c7cda7a906ee

inheritance css css3

2 ответа

6 Решение David Baron [2015-03-26 18:03:00]

Итак, несколько вещей здесь:

Рабочая группа CSS согласилась изменить значение currentColor между уровнем цвета CSS 3 и уровнем цвета CSS 4. В уровне 3, он разрешается при вычисленном значении времени, и вычисленное значение наследуется; в уровне 4 ключевое слово currentColor наследуется как вычисленное значение и разрешается при использовании времени значения.

Было несколько причин сделать это изменение, хотя я не могу найти минуты, и я забыл все подробности. (Я мог найти минуты на https://lists.w3.org/Archives/Public/www-style/2014Feb/0052.html, обсуждая изменение после факта.) Это ухудшает ситуацию для переходов/анимаций, но лучше в числе других случаев. Это немного увеличивает сложность реализации, но повышает производительность (по крайней мере, в Gecko).

Я думаю, что большинство реализаций еще не успели обновиться до новых правил на Уровне 4. Gecko, конечно же, этого не сделал, хотя это в моем списке вещей, которые нужно сделать (но не вверху).

Firefox долгое время (так как задолго до того, как существовал текущий цвет) реализовал специальное внутреннее значение в качестве начального значения border — * — color и outline-color. (Мы также делаем то же самое для text-decoration-color, но этого не делали с 1998/1999.) Это работает, как 4-го уровня currentColor, поэтому, как только мы переключим нашу реализацию, мы можем объединить две вещи, но мы могли бы ‘t переключить нашу реализацию с 3-го уровня currentColor, поскольку это было бы значительным успехом и поражением памяти, учитывая, что это было начальное значение свойства. (Действительно, объединение нашей реализации означает выполнение той же работы, что и мы, для этих свойств для каждого другого свойства, которое принимает значение цвета.)

text-shadow и box-shadow, когда цвет опущен, явно указали поведение, когда цвет опущен как эквивалентный тому, как уровень 4 определяет currentColor, даже до того, как currentColor работал таким образом: см. определение box-shadow (определение text-shadow просто указывает на коробку-тень).

2 casraf [2015-03-26 11:42:00]

  • Почему существует разница с границей в Firefox при отключении currentColor

спецификации CSS для наследования text-shadow говорят, что он должен наследовать .inner currentColor , если он сам установлен в inherit , но box-shadow не указана и выглядит как браузеры несовместимы с реализацией. Возможная ошибка.

  • Почему наследование не использует значение цвета для одного и того же элемента?

Кажется, наследует вычисленное значение, а не введенное. Пример:

Как я уже сказал, это ошибочная реализация.

  • Есть ли способ использовать одни и те же свойства и переключать цвет? (для пограничного цвета есть, как вы можете видеть в примере, сбросив его)

Как о явном дублировании вместо наследования? Это даст вам лучший результат, не приводя к SASS/LESS, imo.

CSS caret-color Свойство

Пример

Задайте цвет курсора во входных элементах:

Определение и использование

Свойство caret-color определяет цвет указателя (курсора) в входах, текстовое или любом элементе, редактируемом.

Значение по умолчанию: auto
Inherited: yes
Animatable: Читайте о animatable
Version: CSS3
Синтаксис JavaScript: object.style.caretColor=»red»

Поддержка браузера

Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL