Example 1: Basic Transparent Input Field

Example 2: Transparent Input Field on a Background Image

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.

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

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.

Tags:

#HTML-Questions #HTML #Web Technologies

Example 2: Transparent Input Field on a Background Image

Example 1: Basic Transparent Input Field

HTML

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

Similar Reads