H Vn Lc  BIT H Vn Lc BIT - 3 months ago 33
CSS Question

How to move glyphicon to float right?

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;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<li>
<div class="form-search">
<form action="#" class="entypo-search glyphicon glyphicon-search">
<fieldset><input id="search" placeholder="Search" /></fieldset>
</form>
</div>
</li>





This working with me. But I want the
glyphicon glyphicon-search
float to the right of the text box.

I tried to add from:

<form action="#" class="entypo-search glyphicon glyphicon-search">


to:

<form action="#" class="entypo-search glyphicon glyphicon-search icon-arrow-right pull-right">


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;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<li>
<div class="form-search">
<div class="glyphicon glyphicon-search icon-arrow-right pull-right">
<form action="#" class="entypo-search">
<fieldset><input id="search" placeholder="Search" /></fieldset>
</form>
</div>
</div>
</li>




Answer

The .entypo-search style is overridden by .glyphicon and therefore you need to add !important to the style. Also the right: 0 has to be set for .entypo-search:before instead of the left property.

Checkout the codepen link http://codepen.io/jarun/pen/Zpzbwo

.entypo-search:before {
  position: absolute;
  top: 0.4em;
  right: 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 !important;
  top: 30% !important;
  right: 0;
}

.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;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<li>
  <div class="form-search">
    <form action="#" class="entypo-search glyphicon glyphicon-search">
      <fieldset><input id="search" placeholder="Search" /></fieldset>
    </form>
  </div>
</li>