Home » Html » Is there a pure CSS way to make an input transparent?

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

Posted by: admin November 29, 2017 Leave a comment

Questions:

How can I make this input transparent?

<input type="text" class="foo">

I’ve tried this but it doesn’t work.

background:transparent url(../img/transpSmall.png) repeat scroll 0 0;
Answers:
input[type="text"]
{
    background: transparent;
    border: none;
}

Nobody will even know it’s there.

Questions:
Answers:

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

Questions:
Answers:

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.

Questions:
Answers:

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