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 has a bunch of components for user interface design. One of them is the Inputs component. Inputs are used for various purposes on a web page. It is useful in taking information from the user in real-time and saving it in a database. Depending on the requirements of the usage of inputs there are different variations of inputs. One of them is the inverted variation.

Semantic UI Input Inverted Variation: If you want to display input on black background you can make use of inverted accordion. A single or group of inputs with relatable content can be displayed in dark background. We will create a UI to show the input inverted variation.

Semantic-UI Input Inverted Variation Class:

• inverted: This class is used to make the input inverted(color-wise).

Syntax:

<div class="ui inverted segment>
  <div class="ui inverted input">
     <input type="text" placeholder="">
      ...
  </div>
   ...
</div>

Example 1: This example demonstrates the input inverted variation using the inverted class. You can see the output in the image below which shows different inputs in dark background.

Output : You can see the inputs in the dark background as shown in the image below. All the inputs are in the dark background since the input is tagged with an inverted class.

Example 2 : This example demonstrates the input inverted variation using the inverted class. You can see the output in the image below which shows different inputs in dark background.

Output:

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