Skip to content
Related Articles

Related Articles

Semantic-UI Input Transparent Variation

Improve Article
Save Article
  • Last Updated : 24 Feb, 2022
Improve Article
Save Article

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.

Semantic UI Input Transparent Variation, users might need to display an input with no background, i.e., it adds a unique touch to the input with its transparent look, which allows web pages to have inputs match with the page background color.

Semantic-UI Input Transparent Variation Class:

  • transparent: This class is used to specify the transparent variation of inputs.

Syntax:

<div class="ui transparent input">
    <input type="text" placeholder="Text">
    ....
</div>

Example 1: This example demonstrates the input transparent variation using the transparent class in Semantic-UI.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
</head>
  
<body>
    <div class="ui container">
        <h2 class="ui header green">GeeksforGeeks</h2>
        <b>
            <p>Semantic UI Input Transparent Variation</p>
        </b><hr>
        <p>Transparent input :</p>
        <div class="ui transparent input">
            <input type="text" placeholder="Enter name / email">
        </div>
        <br />
        <p>Non transparent input : </p>
        <div class="ui input">
            <input type="text" placeholder="Enter name / email">
        </div>
    </div>
</body>
</html>


Output: Both the inputs can be seen from the image below. You can see the difference between the transparent input with no background and non-transparent input with a border line background.

Semantic UI inputs

Example 2: This example demonstrates a bundle of transparent inputs variations as a sign up form using the transparent class. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
</head>
  
<body>
    <div class="ui container">
        <center>
            <h2 class="ui header green">GeeksforGeeks</h2>
            <b>
                <p>Semantic UI Input Transparent Variation</p>
            </b>
            <hr>
            <div class="ui segment">
                <p>Sign up Form</p>
                <div class="ui transparent input">
                    <input type="text" placeholder="Enter name / email">
                </div>
                <br />
                <div class="ui transparent input">
                    <input type="number" placeholder="Enter contact number">
                </div>
                <br />
                <div class="ui transparent input">
                    <input type="password" placeholder="Enter password" /> 
                </div>
            </div>
        </center>
    </div>
</body>
</html>


Output: All the transparent inputs can be seen in the image below.

Transparent inputs

Reference: https://semantic-ui.com/elements/input.html#transparent


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!