如何使Bootstrap输入框透明化

Question

11

我想从Bootstrap输入框form-control中去除边框。设置 border-color:white 后，得到如下结果：

enter image description here

我怎样才能去掉顶部的边框？我认为可能是阴影属性，但是...没有效果。

这是标记代码：

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

bootstrap v3.1.1

编辑:

以下解决方案均不起作用。请查看此Fiddle。

- haki

5个回答

2

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

- Boniface Dennis

1

.transparent-input { background: tranparent; }

- A.M.N.Bandara

1

改变背景颜色。

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

你可以将背景颜色更改为 (0,0,0)，并将其不透明度设置为 '0'。同时使用 border:none。如果上述方法无效，请尝试使用 !important 覆盖现有样式。

- newTag

0

- user2878850

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pranav C Balan · Accepted Answer

使用 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以覆盖现有样式