CODEWITHSUNDEEP
htmlcsstransition
Nerdkowski
Nerdkowski

Reputation: 475

Input transition

I try to animate my search button.
When you click on it, it should expand and slide to the side.
The animation is no problem in css, but in front of the search bar is a div, which does not follow the expanding search bar. 

<form>
    <div class="test"></div>
    <input type="search" placeholder="Search">
</form>

form{
  float:right;
}

input[type=search] {
  background: #E75757 url(http://nerdlove.de/Blog/img/search_icon.svg) no-repeat 15px center;
    background-size: 25px;
  border: none;
  padding: 10px 10px 10px 10px;
  width: 35px;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
    text-indent:-999px;
}

input[type=search]:focus {
  width: 150px;
  background-position: -30px;
  text-indent: 0px;
}

.test{
    float:left;
}

.test:before{
    content: no-close-quote;
  border-top: 40px solid rgba(0, 0, 0, 0);
  border-left: 0px solid rgba(0, 0, 0, 0);
  border-right: 18px solid #E75757;
  float: right;
  right: 55px;
  position: absolute;
}

Example

I would add the :before to the input. But it is not possible in css.

Edit
HERE IS WHAT I WANT

Upvotes: 2

Views: 452

Answers (1)

KittMedia
KittMedia

Reputation: 7466

Just position the .test element as relative and the :before to right: 0;.

.test{
    float:left;
    position: relative;
}

.test:before{
    content: no-close-quote;
  border-top: 40px solid rgba(0, 0, 0, 0);
  border-left: 0px solid rgba(0, 0, 0, 0);
  border-right: 18px solid #E75757;
  float: right;
  right: 0;
  position: absolute;
}

Demo

Upvotes: 1

Related Questions