Semantic-UI Input Transparent Variation

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.

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. 

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

Transparent inputs

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