html - 如何从输入组添加、 Bootstrap 中删除此行

Question

如何删除图标周围的线条，比如将图标放在搜索框内 我试过背景透明边框 0 仍然不起作用边框仍然存在

这是我做的

                <center>
      <div class="input-group col-xs-4 col-md-6" >
         <input type="text" name="search" id="search-building" class="form-control" placeholder="Search..." required>
         <div class="input-group-addon">
      <i class="fas fa-search"></i>
    </div>
    </div> 
   </center>

CSS

.input-group-addon{ 
    border:0;
    background:white;
     pointer-events: none;

  }

Answer 1

由于特殊性，您的 css 类规则未被应用...要解决它，请将父级添加到您的选择器中..

.input-group .input-group-addon{ 
    border:0;
    background:white;
     pointer-events: none;

  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="input-group col-xs-4 col-md-6" >
         <input type="text" name="search" id="search-building" class="form-control" placeholder="Search..." required>
         <div class="input-group-addon">
      <i class="fas fa-search"></i>
    </div>