Filter inputs

Serves as a set of filters that would be placed above and to the right of a table. What is a filter inputs How do you make a filter inputs? This script and codes were developed by Rob on 03 November 2021, Wednesday.

How do I make an filter inputs?
  1. Filter inputs Previews
  2. Filter inputs HTML Codes
  3. Filter inputs CSS Codes
Filter inputs Previews

Filter inputs HTML Codes

<!DOCTYPE html>
<html >
  <meta charset="UTF-8">
  <title>Filter inputs</title>
      <link rel="stylesheet" href="css/style.css">



<div class="header">
  <div class="panel">
    <div id="name-panel">
      <span class="inline-label">Name</span>
      <input class="filter-input"/>
    <div id="org-panel">
      <span class="inline-label">Organization</span>
      <input class="filter-input"/>
    <div id="position-panel">
      <span class="inline-label">Position</span>
      <input class="filter-input"/>

Filter inputs CSS Codes

@import url(;

body {
  font-size: 14px;
  font-family: 'Roboto', sans-serif;

.header {
  width: 100%;
  background: #333333;
  color: #eeeeee;
  text-align: right;
  padding: 4px;

.panel {
  position: relative;
  right: 0px;

.inline-label {
  display: block;
  text-align: left;
  width: 100%;

.filter-input {
  width: 100%;

.panel > div {
  display: inline-block;
  width: 180px;
  margin-right: 8px;

#name-panel {

#org-panel {

#position-panel {
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.