How to make a bootstrap input field "transparent"

Question

I'm trying to remove the border from a bootstrap input form-control. After setting border-color:white i'm getting this

How can i lose this top border ? I thought it might be a shadow property but ... nothing.

This is the markup

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

bootstrap v3.1.1

EDIT :

None of the solution below is working. see this Fiddle

Answer 1

with bootstrap class you can make it transparent ...just apply this class to your code .bg-transparent

Answer 2

Set background color using rgba() also add border:none; to remove the border

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

The last value 0 will make the background transparent

or simply set background color as transparent.

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

add !important to override the existing style

Answer 3

Change the background-color.

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

You can change the background color to (0,0,0) and its opacity to '0'. Also use border:none. And try using !important to override the existing style if the above doesn't work.

Answer 4

.transparent-input { background: tranparent; }