Semantic-UI Search Disabled 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.
A Semantic UI Search module is used for searching something from a selection of data. The data can be supplied through an API call or through a local variable within JavaScript.
Semantic UI Search Disabled Variation Class:
- disabled: This class is used on the search module to disable it.
Syntax:
<div class="ui search disabled">
...
</div>
Example 1: The example below shows how to disable a search module in Semantic UI using the disabled class.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link rel="stylesheet" href= <style> .container{ text-align: center; } h3{ margin-top: 0px; } .container>p{ margin-top: 30px !important; } </style> </head> <body> <div class="ui container"> <div> <h1 style="color:green;">GeeksforGeeks</h1> <h3>Semantic UI - Search Disabled Variation</h3> </div> <p><b>Normal Search:</b></p> <div class="ui search"> <div class="ui icon input"> <input class="prompt" type="text" placeholder="Search Something"> <i class="search icon"></i> </div> <div class="results"></div> </div> <p><b>Disabled Search:</b></p> <div class="ui search disabled"> <div class="ui icon input"> <input class="prompt" type="text" placeholder="Search Something"> <i class="search icon"></i> </div> <div class="results"></div> </div> </div> </body> </html> |
Output:
Semantic UI disabled search variation
Example 2: This example shows how to disable the search module using JavaScript.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI - Search Disabled Variation</title> <link rel="stylesheet" href= <script src= </script> <script src= </script> <style> .container{ text-align: center; } h3{ margin-top: 0px; } .container>p{ margin-top: 30px !important; } button{ margin-top: 25px !important; } </style> </head> <body> <div class="ui container"> <div> <h1 style="color:green;">GeeksforGeeks</h1> <h3>Semantic UI - Search Disabled Variation</h3> </div> <p><b>Search:</b></p> <div id="search1" class="ui search"> <div class="ui icon input"> <input class="prompt" type="text" placeholder="Search Something"> <i class="search icon"></i> </div> <div class="results"></div> </div> <button class="ui inverted red button" onclick="disable();"> Disable Search </button> </div> <script> function disable(){ document.getElementById("search1").classList.add("disabled"); } </script> </body> </html> |
Output:
Reference: https://semantic-ui.com/modules/search.html#disabled
Please Login to comment...