Semantic-UI Input Inverted Variation
Last Updated :
23 Feb, 2022
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.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<br/><br/>
<div class="ui container">
<h2 class="ui header green">
GeeksforGeeks
</h2>
<b>
<p>Semantic UI Input Inverted Variation</p>
</b><hr><br/>
<div class="ui inverted segment">
<strong>
Inverted text input :
</strong>
<div class="ui inverted input">
<input type="text" placeholder="Enter your name here">
</div><br/><br/>
<strong>
Inverted date input :
</strong>
<div class="ui inverted input">
<input type="date">
</div><br/><br/>
<strong>
Inverted local date input :
</strong>
<div class="ui inverted input">
<input type="datetime-local"/>
</div><br/><br/>
<strong>
Inverted email input :
</strong>
<div class="ui inverted input">
<input type="email" placeholder="email"/>
</div><br/><br/>
<strong>
Inverted password input :
</strong>
<div class="ui inverted input">
<input type="password" placeholder="password"/>
</div>
</div>
</div>
</body>
</html>
|
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.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<br/><br/>
<div class="ui container">
<center>
<h2 class="ui header green">
GeeksforGeeks
</h2>
<b>
<p>Semantic UI Input Inverted Variation</p>
</b><hr><br/>
<div class="ui inverted segment">
<p>Sign up Form</p>
<div class="ui inverted input">
<input type="text" placeholder="Enter name / email">
</div><br/><br/>
<div class="ui inverted input">
<input type="number" placeholder="Enter contact number">
</div><br/><br/>
<div class="ui inverted input">
<input type="password" placeholder="Enter password"/>
</div>
</div>
</center>
</div>
</body>
</html>
|
Output:
Reference : https://semantic-ui.com/elements/input.html#inverted
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...