- This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
Viewing 4 posts - 1 through 4 (of 4 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Hello,
I just read an article written by Nick La of WebDesignerWall http://webdesignerwall.com/tutorials/expandable-mobile-search-form
In the demo page, we see that the form field slides out to the right. I wonder anyone can help to explain me how to slide out the form field to the left, or to the opposite side?
Thanks in advance!
here from the source code, after focus input apply another css properties
/* demo B */
#demo-b input[type=search] {
width: 15px;
padding-left: 10px;
color: transparent;
cursor: pointer;
}
#demo-b input[type=search]:hover {
background-color: #fff;
}
#demo-b input[type=search]:focus {
width: 130px;
padding-left: 32px;
color: #000;
background-color: #fff;
cursor: auto;
}
#demo-b input:-moz-placeholder {
color: transparent;
}
#demo-b input::-webkit-input-placeholder {
color: transparent;
}
what CSS properties to add after the existing one?
Thank you for your comment!
<p>http://codepen.io/nareshsadu/pen/adrhA</p>
<p>see this link, you will easily understand …..</p>
-moz-transition:all 2s ease;
-webkit-transition:all 2s ease;
<p>is the trick for sliding animation here…</p>