如何将glyphicon移动到右边？

Question

我有一个搜索文本框。

像这样：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这与我合作。但我希望glyphicon glyphicon-search浮动到文本框的右侧。

我试图添加：

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

为：

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

但不能适用于form元素。

所以，我尝试用元素包装表单。

但是你可以看到：似乎隐藏了位置。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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>

Answer 2

You can use the class has-feedback and move the glyphicon to a span after the input. That's already done in Bootstrap, so you don't need any CSS for that.

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 has-feedback">
      <fieldset>
        <input id="search" placeholder="Search" />
        <span class="glyphicon glyphicon-search form-control-feedback" aria-hidden="true"></span>
      </fieldset>
    </form>
  </div>
</li>