Question: I have a simple `input[type="text"]` and I want to transition its width when clicking on it.

I mean I want to slide it on the left like this: [demo](http://jsfiddle.net/rexhin/gUS6s/2/)

I don't know why this isn't working.

Here is my fiddle: [demo](http://jsfiddle.net/rexhin/gUS6s/5/)

```
<input type="text" id="menu" />

```

This is my css.

```
#menu {
    width:32px;
    position:absolute;
    right:50%;
    transition: width .8s;
}

.slide {
    width:180px;
}

```

This is my JS.

```
$("#menu").click(function() {
    $(this).addClass("slide");
});

```

Answer: 
You dont have to use jQuery for this.

You can use [`:focus`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus) selector.

Just add this to your CSS

```
#menu:focus {
    width:180px;
}

```

[DEMO](http://jsfiddle.net/gUS6s/9/)
It's because of CSS specificity, change it to

```
#menu {
    width:32px;
    position:absolute;
    right:50%;
    transition: width .8s;
}

#menu.slide {
    width:180px;
}

```

[**FIDDLE**](http://jsfiddle.net/gUS6s/7/)

Styles set on an ID override the styles on the class, as ID's are more specific.