How to make a bootstrap input field "transparent"

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


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.