How to make a bootstrap input field "transparent"

css, twitter-bootstrap

Solution

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

Problem

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

Original source