Is there a pure CSS way to make an input transparent

Question

How can I make this input transparent    lt input type  text  class  foo  gt    I ve tried this but it doesn t work   background transparent url    img transpSmall png  repeat scroll 0 0

User · Answer

If you want to remove the outline when focused as well try  input type  quot text quot    input type  quot text quot   focus               background  transparent           border  none           outline-width  0

User · Answer

I like to do this  input type  text         background  rgba 0  0  0  0       border  none      outline  none      Setting the outline property to none stops the browser from highlighting the box when the cursor enters

User · Answer

I set the opacity to 0  This made it disappear but still function when you click on it

User · Answer

As a general rule  you should never completly remove the outline or  focus style    https   a11yproject com posts never-remove-css-outlines        using outline  none without proper fallbacks makes your site significantly less accessible to any keyboard only user  not only those with reduced vision  Make sure to always give your interactive elements a visible indication of focus

User · Answer

In case you just need the existence of it you could also throw it off the screen with display  fixed  right  -1000px   It is useful when you need an input for copying to clipboard

User · Answer

input type  text         background  transparent      border  none      Nobody will even know it s there

User · Answer

The two methods previously described are not enough today  I personnally use    input type  text        background-color  transparent      border  0px      outline  none      -webkit-box-shadow  none      -moz-box-shadow  none      box-shadow  none      width 5px      color transparent      cursor default      It also removes the shadow set on some browsers  hide the text that could be input and make the cursor behave as if the input was not there   You may want to set width to 0px also

[html] Is there a pure CSS way to make an input transparent?

Examples related to html

Examples related to css