Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS3 Transition different depending on search or text input?

CSS3 Transition different depending on search or text input?

Problem

First off, I went and looked at the responses generated for answers when asking this question. Didn't find anything similar. I'm just dealing with a weird quirk in my Code Pen. A result I was not expecting.

The easiest way to explain is to simply link to my Code pen. Code Pen: CSS3 Expandable Search Form

I have the same css code applied to two different types of inputs. One is a search input and the other a text input. In order to get similar results from each i have to modify the amount that the Transition opens up to in width on the text input and set it to 95% instead of 100%.

My goal was to have each using the same transition code with similar transition effect. But it's not working. I would be very appreciative to anyone who takes a look at it and may be able to help me. Thanks. BTW I am a newbie to both stack overflow and code pen. I'm sorry if I do anything wrong. lol I did try and look for an answer.

I tried posting code here, but I must be doing something wrong. Everything is in code pen though.

Problem courtesy of: Eric B

Solution

Now have a look at your Code Pen. I have assigned class to every one.

http://codepen.io/anon/pen/AlcHr

I hope you wanted to achieve this.

Solution courtesy of: Gourav

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS3 Transition different depending on search or text input?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×