# How to make a custom element active in Ionic?

**URL:** <https://forum.ionicframework.com/t/how-to-make-a-custom-element-active-in-ionic/30636>\
**Category:** uncategorized\
**Created:** [August 17, 2015, 6:20am UTC](https://forum.ionicframework.com/t/how-to-make-a-custom-element-active-in-ionic/30636 "2015-08-17T06:20:59Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![spythonman](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/spythonman/32/80167_2.png) [@spythonman](https://forum.ionicframework.com/u/spythonman)\
**Post date:** [August 17, 2015, 6:20am UTC](https://forum.ionicframework.com/t/how-to-make-a-custom-element-active-in-ionic/30636/1 "2015-08-17T06:20:59Z")

</div>

I created custom html blocks to create a virtual keyboard. I’d like when the user holds a key, the color changes.

Here is a jsfiddle: [http://jsfiddle.net/b19v9s17/](http://jsfiddle.net/b19v9s17/)  
In summary, the important part of code looks like this:

```
        <kbm-container>
            <kbm-block>7</kbm-block>
            <kbm-block>8</kbm-block>
            <kbm-block>9</kbm-block>
            <kbm-block>4</kbm-block>
            <kbm-block>5</kbm-block>
            <kbm-block>6</kbm-block>
            <kbm-block>1</kbm-block>
            <kbm-block>2</kbm-block>
            <kbm-block>3</kbm-block>
            <kbm-block>0</kbm-block>
        </kbm-container>

```

In CSS, I have something like:

```
kbm-block {
  background: #3b65a7;
}

kbm-block:active {
  background: #123456;
}

```

It works on Chrome when holding click, but does nothing in Ionic when touching the buttons (they are not button actually). Any idea? Thanks!

---

<div class="post-metadata">

**Author:** ![Gajotres](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/gajotres/32/98564_2.png) [@Gajotres](https://forum.ionicframework.com/u/Gajotres)\
**Post date:** [August 17, 2015, 7:37am UTC](https://forum.ionicframework.com/t/how-to-make-a-custom-element-active-in-ionic/30636/2 "2015-08-17T07:37:17Z")

</div>

Maybe this will help you:

> **[What exactly is the rule for applying .activated class?](http://forum.ionicframework.com/t/what-exactly-is-the-rule-for-applying-activated-class/30630/2?u=gajotres)**
>
> :active state will not work on Android devices on non-anchor elements. Technically, it will work only on elements. Though you can make it work with a little cheat: This will tell the android device to handle touch events...