Write a single line😮 for tinting your brand color
Tags: html, css, webdev, todayilearned
Published: 2022-01-25 14:45:56

Hey There, Feel afresh to see you again and we may think sometimes as can I change default colors of form elements🤔?? or can I at least change the color while focusing state or while selection state🤔??. The answer is <b>YES</b>.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sqznjnp48bdb88pm4bqo.gif)
 Haha, which is possible by two ways, By customization of default style by lines & lines of code or <b>By writing a single line of code(exactly a property or a pseudo class or a pseudo element)</b>. Hey you seems getting very curated😍. So, wish to save your time and Let's get this ride on the road🎉.

## Possible ways to reach on
* [Changing color on form elements by accent-color🌈](#chapter-1)
* [Changing color while focusing by :focus-visible🧐](#chapter-2)
* [Changing color while selection by ::selection🔍](#chapter-3)

## Changing color on form elements by <code>accent-color</code>🌈<a name="chapter-1"></a>
<code>accent-color</code> saving you from customization efforts by providing a way to bring your brand into elements.

 Still, Can't get my point. It's completely fine and you will grasp the point by a unambiguous example.

```html
<input type="checkbox" checked />
<input type="checkbox" class="custom" checked />
```
```css
input{
  accent-color: auto;
}
input.custom {
  accent-color: deeppink;
}
```

> <em>Recommended to practice on codepen</em>

{% codepen https://codepen.io/preethi-dev/pen/zYPOppx %}

Currently, <code>accent-color</code> property supported on <b>four elements only</b>.

- checkbox
- radio
- range
- progress

The <code>accent-color</code> property also do their job with <code>color-scheme</code> effectively, allowing to tint both the light and dark elements. 

><b><em>If you not aware of <code>color-scheme</code>. Don't start to suffer and <a href="https://dev.to/preethi_dev/automatic-enabling-dark-modecss-only-2m1h">explore now</a>.</em></b>

For Instance,
```html
<div color-scheme="light">
    <label>
      Default
      <input type="radio" checked>
      <input type="radio">
      <input type="radio">
    </label>
    <label class="accented">
      Brand
      <input type="radio" checked>
      <input type="radio">
      <input type="radio">
    </label>
</div>
<div color-scheme="dark">
    <label>
      Default
      <input type="radio" checked>
      <input type="radio">
      <input type="radio">
    </label>
    <label class="accented">
      Brand
      <input type="radio" checked>
      <input type="radio">
      <input type="radio">
    </label>
</div>
```
```css
:root {
  --brand-color: deeppink;
}
.accented {
  accent-color: var(--brand-color);
}
[color-scheme="dark"] .accented {
  accent-color: hsl(328 100% 80%);
}
```
See the magic✨ below,

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ced7qoxrs95ztaiw6177.png)
 
I can get your thought😁, <em>"hey for practice this, I need a new file or a codepen. So, give me a sample codepen"</em>. Hm ok, I appended the codepen and start to play around on it. 

{% codepen https://codepen.io/preethi-dev/pen/zYPYGqB %}

### Browser Support for <code>accent-color</code>
<code>accent-color</code> supported on modern web browsers.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/15oft566ekay1av9096l.png)

##Changing color while focusing by <code>:focus-visible</code>🧐<a name="chapter-2"></a>
Simply, means <b>change the outline style of focus ring by using <code>:focus-visible</code> pseudo class</b>.

For instance,
```css
:focus-visible {
  outline-color: var(--brand-color);
}
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ieq0wo3y3xlgpvpdqn57.png)
Recommended to play on the codepen and it's a good practice to make a way for familiar with new thing✨.

{% codepen https://codepen.io/preethi-dev/pen/zYPYGqB %}

## Changing color while selection by <code>::selection</code>🔍<a name="chapter-3"></a>

The CSS pseudo-element <code>::selection</code> changes <b>the styling that is highlighted by the user (means allows you to style how selected text looks)</b>, such as when you highlight the text using a mouse or another pointing device.

> <em>Seems interesting right. So early I did a dedicated article on <code><a href="https://dev.to/preethi_dev/improve-your-brand-startegy-using-selection-pseudo-element-3p18">::selection</a></code></em>

 <b>It's really a subtle work for maintain the brand and I am sure which definitely impress your client.</b> If you loved this subtle blog, Then give a endearing heart💝 which really lot to me. I love the discussion with you.

Thanks for Reading!!
<a href="https://dev.to/preethi_dev"><b>Preethi</b></a>
<em>- Make your CSS life easier</em>