Question

我想在占位符中插入图像并使其显示在右侧。占位符的背景为白色，图像也是白色，但我想添加灰色背景，以便可见。像这样：

我想把图片添加为按钮，但它不会像那样出现。有什么建议吗？

Answer 1

您可以按照此方法查看图标背景，否则请使用图片而不是<i class="fa fa-search"></i>这是一个Font Awesome图标。

＆＃13;

.form-group {
  position: relative;
}

input {
  width: 100%;
  height: 50px;
  border: 1px solid #666;
  padding-right: 70px;
  box-sizing: border-box;
}

.icon {
  position: absolute;
  font-size: 36px;
  top: 0px;
  height: 100%;
  right: 0px;
  line-height: 50px;
  background: #666;
  text-align: center;
  width: 70px;
  color: #FFF;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <title>Font Awesome Icons</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
  <div class="form-group">
    <input type="text" />
    <span class="icon">
      <i class="fa fa-search"></i>
    </span>
  </div>
</body>

＆＃13;

Answer 2

为按钮样式添加背景

class="btn btn-social btn-twitter waves-effect waves-light"

Answer 3

也许您可以考虑使用fontawesome标签来显示图片。

＆＃13;

label {
  display: inline-block;
  margin: 0;
  padding: .1em .3em;
  background: darkgray;
  color: white;
  cursor: pointer;
}

label:after {
  content: "\f002";
  font-family: FontAwesome;
}

.container {
  display: flex;
  align-items: center;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
  <input type="text" placeholder="search...">
  <label></label>
</div>

＆＃13;

Answer 4

你可以通过绝对和相对定位以及FontAwesome来实现这个目标。

要使用FA，请包含以下内容：

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

在<head>中。 HTML将如下：

<div class="data-path-container">
  <input class="data-path" placeholder="From where to grab the data">
  <div class="data-path-icon"><i class="fa fa-search"></i></div>
</div>

我们将.data-path-container相对定位和宽度。例如，宽度为：calc(30vw + 40px)。

.data-path-container {
  width: calc(30vw + 40px);
  position: relative;
}

输入也不需要太多样式;只是高度，填充和边框/边框半径，使它有一个很好的弯曲边缘。

.data-path-input {
  height: 1.2em;
  width: 30vw;
  padding: 5px 30px 5px 5px;
  border-radius: 5px;
  border: 1px solid #DEDEDE;  
}

.data-path-icon需要相当多的CSS：

.data-path-icon {
    /* background-color, color, height and width */
  width: 30px;
  height: 1.5em;
  background-color: grey;
  color: white;
    /* positioning */
  position: absolute;
  right: 0;
  top: 1px;
    /* centering the search icon */
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
    /* curved edge and hover effect */
  border-radius: 0 5px 5px 0;
  cursor: pointer;
}

＆＃13;

.data-path-container {
  width: calc(30vw + 40px);
  position: relative;
}
.data-path-input {
  height: 1.2em;
  width: 30vw;
  padding: 5px 30px 5px 5px;
  border-radius: 5px;
  border: 1px solid #DEDEDE;  
}
.data-path-icon {
  width: 30px;
  height: 1.5em;
  background-color: grey;
  position: absolute;
  right: 0;
  top: 1px;
  color: white;
  display: flex;
  border-radius: 0 5px 5px 0;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  cursor: pointer;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="data-path-container">
  <input class="data-path-input" placeholder="From where to grab the data">
  <div class="data-path-icon"><i class="fa fa-search"></i></div>
</div>

＆＃13;

占位符中的图像具有自己的背景

4 个答案: