CODEWITHSUNDEEP
csstwitter-bootstrap
Aristona
Aristona

Reputation: 9341

Textbox transition doesn't work, what may be causing it?

.search-query
{
    width: 300px;
    -webkit-transition: width 2s;
    -moz-transition: width 2s;
    -o-transition: width 2s;
    transition: width 2s;
}

.search-query:hover
{
    width: 500px;
}

<form action="" class="navbar-search pull-right">
    <input type="text" placeholder="Search" class="search-query" />
</form>

I expect textbox to grow from 300px to 500px in two seconds, but it grows instantly. I'm pretty new to CSS transitions so I can't figure it out myself. However, it looks exactly the same as the example on w3schools.com and it works there.

What's the problem?

Update: The example above works in jsfiddle, it's probably related to my layout so here is the whole layout using Twitter Bootstrap.

<div class="navbar">
    <div class="navbar-inner navbar-fixed-top">
        <a class="brand" href="#">Project Name</a>

        <ul class="nav">
            <li><a href="#">Hi</a></li>
            <li><a href="#">Hi</a></li>
        </ul>

        <form action="" class="navbar-search pull-right">
            <input type="text" placeholder="Search" class="search-query" />
            <input type="submit" id="search-submit" name="submit" class="btn btn-success btn-small" value="Search">
        </form>

        <ul class="nav pull-right">
            <li><a href="#">Hi</a></li>
            <li><a href="#">Hi</a></li>
        </ul>       
    </div>
</div>
</body>

Ps. I'm on FF 20.0.1

Upvotes: 1

Views: 216

Answers (1)

Adrift
Adrift

Reputation: 59799

The problem is on line 1116 of bootstrap.css you already have a transition applying to the input with a more specific selector, so try including ancestor classes to outweigh the specificity, e.g.

.navbar .navbar-inner .navbar-search .search-query
{
width: 300px;
-webkit-transition: width 2s;
-moz-transition: width 2s;
-o-transition: width 2s;
 transition: width 2s;
}

.navbar .navbar-inner .navbar-search .search-query:hover
{
width: 500px;
}

jsFiddle

Upvotes: 1

Related Questions