Question

我的html格式可以搜索，但我的占位符不显示。我有很多搜索，但没有为此工作。请帮帮我

＆＃13;

.search-widget {
  border: 1px solid #858585;
  display: inline-block;
  height: 35px;
  float: left;
}

.search-widget input {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-color: transparent;
  border: 0;
  height: 35px;
}

.search-widget :hover,
.search-widget :focus {
  border-color: #1293D4;
}

.search-widget button {
  background-color: transparent;
  color: #1293D4;
  border: 0;
  height: 35px;
}

＆＃13;

<div class="search-widget">
  <form action="#">
    <input name="name" type="text" placeholder="search" required>
    <button type="submit"><i class="fa fa-search"></i></button>
  </form>
</div>

＆＃13;

Answer 1

如果您的问题是搜索图标没有显示在占位符的位置，那么这可能对您有帮助，在这里您错过了将外部css fontawesome.css添加到您的代码中，请检查以下代码段显示带有图标的占位符的参考。

.search-widget {
  border: 1px solid #858585;
  display: inline-block;
  height: 35px;
  float: left;
}

.search-widget input {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-color: transparent;
  border: 0;
  height: 35px;
}

.search-widget :hover,
.search-widget :focus {
  border-color: #1293D4;
}

.search-widget button {
  background-color: transparent;
  color: #1293D4;
  border: 0;
  height: 35px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="search-widget">
  <form action="#">
    <input name="name" type="text" placeholder="search" required>
    <button type="submit"><i class="fa fa-search"></i></button>
  </form>
</div>

为什么我的占位符没有出现

1 个答案: