如何制作引导输入字段＆＃34;透明＆＃34;

Question

我正在尝试从引导输入form-control中删除边框。 设置border-color:white后我得到了这个

我怎么能失去这个顶级边界？ 我以为它可能是一个影子属性但是......没什么。

这是标记

<div class="form-group">
  <input class="form-control transparent-input" type='text' name='name' placeholder="Field title..."  required>
</div>

bootstrap v3.1.1

编辑：

以下解决方案均无效。 请参阅此Fiddle

Answer 1

使用rgba()设置背景颜色，同时添加border:none;以删除边框

<style>
    input.transparent-input{
       background-color:rgba(0,0,0,0) !important;
       border:none !important;
    }
</style>

最后一个值0会使背景透明

或只是将背景颜色设置为transparent。

<style>
    input.transparent-input{
       background-color:transparent !important;
       border:none !important;
    }
</style>

添加!important以覆盖现有的样式

Answer 2

.transparent-input { background: tranparent; }

Answer 3

更改背景颜色。

.transparent-input {
   background-color: rgba(0, 0, 0, 0);
   border:none;
}

您可以将背景颜色更改为（0,0,0），将其不透明度更改为“0”。 还use border:none。如果以上操作不起作用，请尝试使用!important覆盖现有样式。

Answer 4

使用bootstrap类，可以使其透明...只需将此类应用于您的代码即可。 bg-transparent

Answer 5

尝试将框阴影设置为无。参见https://www.w3schools.com/cssref/css3_pr_box-shadow.asp