Press "Enter" to skip to content

Tags Input Field Made With HTML/CSS and JavaScript

Tags InputΒ is a quick and plain JavaScript-based tag entry component that enables the user to add tags individually or insert multiple tags separated by a comma at one time.

bs tags input, tags input jquery, tags input html, javascript tags input

How to make use of it:

1. Create a tags input on the web page.

<input placeholder="Type tags separated by comma" />

2. Create a container to show the tags you simply typed.

<div class="tag-container">
  <!-- <div class="tag">
  <span>Tag</span>
  <i class="close"></i>
  </div> -->
</div>

3. Insert the tags-input.js script to the web page.

<script src="tags-input.js"></script>

4. The essential CSS types for the tags input.

.input-container {
  border: 2px solid var(--primary-opaque);
  border-radius: .2rem;
  display: flex;
  align-content: flex-start;
  padding: .4rem;
  margin-bottom: .4rem;
}

.tag-container {
  border: 2px solid var(--primary-opaque);
  border-radius: .2rem;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  padding: .4rem;
  overflow-x: auto;
}


.tag-container, 
.input-container input, 
.tag-container .tag {
  background: rgba(0, 0, 0, 0.2);
  color: var(--white);
}

.tag-container .tag {
  margin: .4rem;
  padding: .4rem .6rem;
  border-bottom: .01rem solid var(--primary);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  cursor: default;
}

.tag i {
  font-size: 0.8rem;
  font-style: normal;
  margin-left: .4rem;
  transform: translateY(0.08rem);
}

.close::after {
  content: "βœ•";
  height: 24px;
  width: 24px;
}

.input-container input {
  padding: .4rem;
  font-size: 1.2rem;
  border: 0;
  outline: none;
  flex: 1;
}

Convenient Tags Input In Plain JavaScript, Tags Input Plugin/Github

Tags-Input-Field-Demo


See Demo And Download

Official Website(gpaiva00): Click Here

This superior jQuery/javascript plugin is developed by gpaiva00. For extra Advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *