输入中的响应fa-icon

时间:2015-12-04 06:01:01

标签: css

以下是树屋作者的一些代码,展示了如何在输入中放置图标。

HTML:

<div class="search">
  <span class="fa fa-search"></span>
  <input placeholder="Search term">
</div>

CSS:

@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
body {
  margin: 30px;
}

.search {
  position: relative;
  color: #aaa;
  font-size: 16px;
}

.search input {
  width: 250px;
  height: 32px;
  background: #fcfcfc;
  border: 1px solid #aaa;
  border-radius: 5px;
  box-shadow: 0 0 3px #ccc, 0 10px 15px #ebebeb inset;
}

.search input {
  text-indent: 32px;
}

.search .fa-search {
  position: absolute;
  top: 10px;
  left: 10px;
}

证明它的笔: http://codepen.io/jamesbarnett/pen/aBnbL#0

如何将图标放在输入的末尾并让它响应更改屏幕?

我尝试使用百分比定位图标,但它根本不起作用。 这是我尝试的小提琴:

http://jsfiddle.net/x7j869g7/2/

2 个答案:

答案 0 :(得分:4)

You can give display:inline-block; and position:relative to .search and then align icon to the right side(right: 10px).

Jsfiddle

的自定义属性点击链接

&#13;
&#13;
@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
 body {
  margin: 30px;
}
.search {
  position: relative;
  color: #aaa;
  font-size: 16px;
  display: inline-block;
}
.search input {
  width: 250px;
  height: 32px;
  background: #fcfcfc;
  border: 1px solid #aaa;
  border-radius: 5px;
  box-shadow: 0 0 3px #ccc, 0 10px 15px #ebebeb inset;
}
.search input {
  text-indent: 5px;
  padding-right: 30px;
  box-sizing: border-box;
}
.search .fa-search {
  position: absolute;
  top: 8px;
  right: 10px;
}
&#13;
<div class="search">
  <span class="fa fa-search"></span>
  <input type="text">
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

* {
  box-sizing: border-box
}
// browser reset
 body {
  margin: 30px;
}
.search {
  position: relative;
  color: #aaa;
  font-size: 16px;
  width: 250px;
}
.search input {
  padding-left: 5px;
  width: 250px;
  height: 32px;
  background: #fcfcfc;
  border: 1px solid #aaa;
  border-radius: 5px;
  box-shadow: 0 0 3px #ccc, 0 10px 15px #ebebeb inset;
}
.search input {
  padding-right: 32px;
}
.search .fa-search {
  position: absolute;
  top: 7px;
  right: 10px;
  z-index: 10;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="search">
  <input placeholder="Search term">
  <span class="fa fa-search"></span>
</div>

您需要设置搜索div的宽度。并将其定位在右边。