I have a search textbox.
Like this:
.entypo-search:before {
position: absolute;
top: 0.4em;
left: 0px;
}
li.lien-he-padding{
padding-right: 40px;
}
.form-search {
background-color: white;
border-radius: 30px;
padding: 20px 20px;
width: 13px;
overflow: hidden;
position: absolute;
height: 30px;
right: 50%;
-webkit-transition: width .55s ease;
-moz-transition: width .55s ease;
-ms-transition: width .55s ease;
-o-transition: width .55s ease;
transition: width .55s ease;
}
form {
position: relative;
}
input {
width: 0px;
height: 25px;
font-size: 15px;
margin-left: 30px;
margin-top: -5px;
line-height: 30px;
border: none;
}
.entypo-search {
position: absolute;
top: 30%;
}
.form-search:hover {
border: 1px solid #b3cccc;
width: 230px;
}
.form-search:hover form input {
width: 200px;
}
.form-search form input:focus,
.form-search form input:active{
outline:none;
width: 300px;
}
li div.form-search:hover {
color: orange;
cursor: pointer;
}
This working with me. But I want the glyphicon glyphicon-search float to the right of the text box.
I tried to add from:
to:
But can't apply to form element.
So, I tried to wrap form with element.
But you can see: seem position of is hidden.
.entypo-search:before {
position: absolute;
top: 0.4em;
left: 0px;
}
.form-search {
background-color: gray;
border-radius: 30px;
padding: 20px 20px;
width: 13px;
overflow: hidden;
position: absolute;
height: 30px;
right: 50%;
-webkit-transition: width .55s ease;
-moz-transition: width .55s ease;
-ms-transition: width .55s ease;
-o-transition: width .55s ease;
transition: width .55s ease;
}
form {
position: relative;
}
input {
width: 0px;
height: 25px;
font-size: 15px;
margin-left: 30px;
margin-top: -5px;
line-height: 30px;
border: none;
}
.entypo-search {
position: absolute;
top: 30%;
}
.form-search:hover {
border: 1px solid #b3cccc;
width: 230px;
}
.form-search:hover form input {
width: 200px;
}
.form-search form input:focus,
.form-search form input:active{
outline:none;
width: 300px;
}
li div.form-search:hover {
color: orange;
cursor: pointer;
}