CODEWITHSUNDEEP
htmlcsstransparency
livethecode
livethecode

Reputation: 31

How to make input element completely transparent?

How can I make the input element completely transparent so that it has the body background image and not the background colour of its parent?
HTML code:

body{
    background-image:url("https://upload.wikimedia.org/wikipedia/commons/3/35/Neckertal_20150527-6384.jpg");
}

#wrapper{
    background-color: white;
    height: 100px;
}
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

    </head>
    <body>
        <div id="wrapper">
            <input type="text">
        </div>
    </body>
</html>

Upvotes: 2

Views: 1217

Answers (3)

bdemirka
bdemirka

Reputation: 837

As I understand you are trying to prevent child element from inheriting parent's background color.

The only way to do is overriding the style

I don't know if this works for you but you can do:

input{
        background-image:url("image.jpg");
        border: none;
    }

you can also do whatever part of the background image you want to display instead input field, simply cut that part of the image and set as a background image for the input field.

Upvotes: 2

Maestro
Maestro

Reputation: 865

You can do it this way :

#wrapper{
    background-color: white;
    height: 100px;
}

#wrapper > input
{
    background-color: transparent;
    border: none;
}
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="wrapper">
            <input type="text">
        </div>
    </body>
</html>

Similar answer was posted few years ago : set input transparent

Upvotes: 2

Ahron M. Galitzky
Ahron M. Galitzky

Reputation: 2261

Add css as follows:

#wrapper > input {
     background-color: transparent;
     border: none;
}

If you want to remove the border on focus too, then add:

#wrapper > input:focus {
     outline:none;
}

Upvotes: 2

Related Questions