How to Set an Input Field Transparent on a Transparent Div in HTML ?

Last Updated : 19 Feb, 2024

Creating a transparent input field on a transparent div can enhance the aesthetic appeal of your web page, especially when you want to overlay input fields on background images or videos. In this article, we will discuss how to achieve this effect using HTML and CSS.

Example 1: Basic Transparent Input Field

In this example, we create a basic transparent input field on a transparent div.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Transparent Input Field</title> 
    <style> 
        body { 
            background: #9b9b9b; 
            width: 100%; 
        } 
  
        .transparent-input { 
            background: transparent; 
        } 
  
        input { 
            width: 250px; 
            height: 40px; 
            font-size: 24px; 
            border: 1px solid #383535; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="transparent-div"> 
        <input type="text" 
            class="transparent-input" 
            placeholder="Enter text here..."> 
    </div> 
</body> 
  
</html>

Output: In this code, the .transparent-div class has a transparent white background using the hex color format. The .transparent-input class makes the input field transparent by setting the background to transparent.

transparent-background-1

Example 2: Transparent Input Field on a Background Image

In this example, we place a transparent input field on a transparent div that overlays a background image.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Transparent Input Field on Background Image</title> 
    <style> 
        .background-image { 
            background-image: url( 
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png'); 
            background-size: cover; 
            position: relative; 
            height: 100vh; 
        } 
  
        .transparent-div { 
            background: transparent; 
            position: absolute; 
            top: 50%; 
            left: 50%; 
            transform: translate(-50%, -50%); 
            padding: 20px; 
        } 
  
        .transparent-input { 
            background: transparent; 
            border: none; 
            outline: none; 
            color: #fff; 
            border: 1px solid #fff; 
            width: 250px; 
            height: 50px; 
            font-size: 24px; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="background-image"> 
        <div class="transparent-div"> 
            <input type="text" 
                class="transparent-input" 
                placeholder="Enter text here..."> 
        </div> 
    </div> 
</body> 
  
</html>

Output: In this code, the .background-image class sets a background image for the div. The .transparent-div class is positioned absolutely to center it over the background image and has a semi-transparent black background. The .transparent-input class ensures that the input field is transparent and has white text color for better visibility against the dark background.

transparent-background-2