搜索字形的背景颜色

我试图让我的搜索字形上的背景颜色占据满框。理想情况下，它应该看起来像this。搜索字形的背景颜色

然而，目前它看起来像this。

我不确定发生了什么事。

这里是我的html（我使用Bootstrap）。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="col-md-6"> 
 
    <div id="custom-search-input"> 
 
    <div class="input-group col-md-12"> 
 
     <input type="text" class="form-control input-lg" placeholder="Search by user name, member types, genres..." /> 
 
     <span class="input-group-btn"> 
 
     <button class="btn btn-info btn-lg" type="button"> 
 
      <i class="glyphicon glyphicon-search"></i> 
 
     </button> 
 
     </span> 
 
    </div> 
 
    </div> 
 
</div>

编辑补充我的CSS：

#custom-search-input{ 
    padding: 3px; 
    border: solid 1px #E4E4E4; 
    border-radius: 6px; 
    background-color: #fff; 
    height: 75%; 
} 

#custom-search-input input{ 
    border: 0; 
    box-shadow: none; 
} 

.input-group-btn{ 
    background: #E44424; 
} 

#custom-search-input button{ 
    margin: 2px 0 0 0; 
    background: #E44424; 
    box-shadow: none; 
    border: 0; 
    color: black; 
    padding: 0 8px 0 10px; 
    border-left: solid 1px #ccc; 
} 

#custom-search-input button:hover{ 
    border: 0; 
    box-shadow: none; 
    border-left: solid 1px #ccc; 
} 

#custom-search-input .glyphicon-search{ 
    font-size: 23px; 
}

来源

2017-09-13 J.G.Sable

你需要的背景颜色适用于'。输入组-btn'有一个单独的类。 –

请附上您的CSS，感谢 – sol

https://codepen.io/Paulie-D/pen/PJwqOq –

你有填充在

#custom-search-input{ 
     padding: 3px; 
    }

这就是原因。而应该有它

.form-control{ 
    padding: 3px; 
    }

如果你需要输入填充

Here's Plunker

来源

2017-09-13 16:37:23

谢谢你，米奇。我输入了你的代码，但它仍然看起来很乱。背景颜色周围仍然有白色条纹。 –

你能分享一个截图吗？ –

我用新图像更新了原始文章。改变了颜色，但你仍然可以看到玻璃盒子后面蓝色的暗示。 –

搜索字形的背景颜色

回答

相关问题