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

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