Expandable Search Form, to the left - html

Question

Check this link (Demo 2)
https://codepen.io/912lab/pen/LsplC
html,
body {
font-family: 'Arial', sans-serif;
font-size: 16px;
}
/* border-box */
.search-container *,
.search-container *:after,
.search-container *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
/* search bar focus */
.search-container *:focus {
background: #fbfbfb;
color: #333333;
outline: 0;
}
/* search bar container */
.search-container {
display: table;
position: relative;
width: 51px;
}
/* search icon button */
.search-icon-btn {
background-color: aquamarine;
border: 1px solid aquamarine;
display: table-cell;
height: 50px;
position: relative;
text-align: center;
vertical-align: middle;
width: 50px;
z-index: 2;
}
/* search bar input container */
.search-input {
position: absolute;
left: 0;
z-index: 1;
}
/* search bar input */
.search-input input.search-bar {
border: 1px solid #cccccc;
height: 50px;
padding: 0px;
width: 50px;
}
.search-input input.search-bar:focus {
padding-left: 60px;
padding-right: 10px;
width: 200px;
}
/* transition effect */
.search-input input.search-bar,
.search-icon-btn {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
/* hover on search bar container */
.search-container:hover > .search-input input.search-bar {
padding-left: 60px;
padding-right: 10px;
width: 200px;
}
<h1>Expandable Search Form</h1>
<p>Pen by Prinzadi</p>
<h3>Demo 1</h3>
<form>
<input type="search" placeholder="Search">
</form>
<h3>Demo 2</h3>
<form id="demo-2">
<input type="search" placeholder="Search">
</form>
Is it possible to expand the search on demo 2 to the left, instead of the right though? I changed the padding and width, but it still expands to the left, instead of the right.
Again, I've tried it several different way but I guess I am missing something silly. I appreciate the help.
Thanks,

Answer 1

When you use the CSS property float: right, it expands from right to left.
Here is the code:
body {
background: #fff;
color: #666;
font: 90%/180% Arial, Helvetica, sans-serif;
width: 800px;
max-width: 96%;
margin: 0 auto;
}
a {
color: #69C;
text-decoration: none;
}
a:hover {
color: #F60;
}
h1 {
font: 1.7em;
line-height: 110%;
color: #000;
}
p {
margin: 0 0 20px;
}
input {
outline: none;
}
input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
display: none;
}
input[type=search] {
background: #ededed url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center;
border: solid 1px #ccc;
padding: 9px 10px 9px 32px;
width: 55px;
-webkit-border-radius: 10em;
-moz-border-radius: 10em;
border-radius: 10em;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
float: right;
margin-right: 701px;
}
input[type=search]:focus {
width: 120px;
background-color: #fff;
border-color: #66CC75;
float: right;
-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
box-shadow: 0 0 5px rgba(109,207,246,.5);
}
input:-moz-placeholder {
color: #999;
}
input::-webkit-input-placeholder {
color: #999;
}
/* Demo 2 */
#demo-2 input[type=search] {
width: 15px;
padding-left: 10px;
color: transparent;
cursor: pointer;
}
#demo-2 input[type=search]:hover {
background-color: #fff;
}
#demo-2 input[type=search]:focus {
width: 130px;
padding-left: 32px;
color: #000;
background-color: #fff;
cursor: auto;
}
#demo-2 input:-moz-placeholder {
color: transparent;
}
#demo-2 input::-webkit-input-placeholder {
color: transparent;
}
<h1>Expandable Search Form</h1>
<p>Pen by Prinzadi</p>
<h3>Demo 1</h3>
<div class="container">
<form>
<input type="search" placeholder="Search">
</form>
</div>
For some reason the input doesn't work in the Stack Snippet, so just copy it over in CodePen or whatever other platform you have chosen.
This isn't positioned how you want, so I set a margin-right property in CSS to change it back to what it was.
I also didn't fix it for the second demo because I want you to figure out how to make this change yourself by looking at the changes I made, then implementing them yourself. This way you will understand how to replicate this solution in the future and increase your knowledge of HTML/CSS in general.
Links: float documentation, tutorial on floats
Related tags: html, css, input, css-float, animation, layout