Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

People also ask

How do you make a transparent input in CSS?

opacity: 0.5; How Do I Make A Section Transparent In Css? As for transparency, it's really quite simple, all you have to do is use: background-color: transparent; you can also use: background-color: rgba(255, 0, 0; also, 0 and 0, as well).

How do I make input type transparent?

input[type=text] { background: transparent; border: none; } background-color:rgba(0,0,0,0);

Is there a transparent color in CSS?

The CSS color name transparent creates a completely transparent color. Using rgba or hsla color functions, that allow you to add the alpha channel (opacity) to the rgb and hsl functions. Their alpha values range from 0 - 1.

How do I make the background transparent in slightly CSS?

Changing the opacity of the background color only To achieve this, use a color value which has an alpha channel—such as rgba. As with opacity , a value of 1 for the alpha channel value makes the color fully opaque. Therefore background-color: rgba(0,0,0,. 5); will set the background color to 50% opacity.


input[type="text"]
{
    background: transparent;
    border: none;
}

Nobody will even know it's there.


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


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.


If you want to remove the outline when focused as well try:

input[type="text"],
input[type="text"]:focus   
{
         background: transparent;
         border: none;
         outline-width: 0;
}