Make Text Input Box Transparent? Should be simple?

this looks ways too simple but it worked for me:

 <input type="text" id="SI"/>

this is my input field, I gave it an ID(SI), then in my CSS:

#SI{
    background-color:transparent;
}

added the transparency to the element with SI id; the background became visible.

Try:

#email {
    background-color:rgba(0, 0, 0, 0);
    color:white;
    border: none;
    outline:none;
    height:30px;
    transition:height 1s;
    -webkit-transition:height 1s;
}
#email:focus {
    height:50px;
    font-size:16px;
}

DEMO here.

Also worth noting, on macOS and iOS, in any browser, the "user agent stylesheet" will override textbox style. You can override this (including the ::focus glow) by adding !important.

#mybox {
    background-color: transparent!important;
    border-color: transparent!important;
    outline: transparent!important;
}

<input type="text" id="mybox" value="Textbox" />

saying I want a transparent color is like having the parent's color so put the value of background-color as inherit.

for me this helped:

<input type="text" />

style:

input {
    background-color:inherit;
    }