The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS how to “ease” an input search when the width changes ? ( css3 )

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #195824

    I have an input search that I am trying to get ease with a transition css3 effect.

    Every time that the user focus on that input, on the right hand will appear a Cancel button which is actually an icon to clean the input. Once that icon appears the width of the input changes, I want to ease the movement of that input because as you know the movement or the transition by default is so rough, I have this JSbin for you to see what I am doing and what I have so far.

    the situation begins here

                <input type="text" class="btnCancel"
                       placeholder="Sports and leagues finder..."
                <div ng-show="query" ng-click="query=''">
                  <i class="ion-close positive"></i>
                </div> -->
              <button ng-show="isSearchFocused"
                      ng-click="query = ''">
                <i class="ion-close-circled"></i>


        .btnCancel {
          -webkit-transition : all 2s ease;
          transition         : all 2s ease;

    this is with CodePen just in case


    1) the background color are set to the wrong div
    2) should be :focus not :hover

    see if this help.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.