Dựa vào Bootstrap 5 - Thiết kế input linh hoạt và đẹp mắt

Nguyễn Tùng Linh

Đầu tiên là inputFloating, đây là kiểu input có label linh hoạt như một Placeholder, Khi focus vào vùng input thì label sẽ được đẩy lên top. Vùng input có thể là 1 thẻ
<input type="text">
hoặc
<div contenteditable="true"></div>
Đây là code đầy đủa để sử dụng nó:

<div class="inputFloating">
	<div contenteditable="true"></div>
	<label><i class="iconsax me-1" icon-name="code-1"></i> Placeholder</label>
</div>

Ngoài ra có thể dựa vào datalist của bootstrap 5 để đưa vào input loại này, code sẽ như sau:

<div class="inputFloating">
	<input type="text" list="LanguageDataList" value="" placeholder>
	<label><i class="iconsax me-1" icon-name="code-1"></i> Placeholder</label>
</div>

và thêm một datalist vào bất kỳ đâu, lưu ý đến dàng buộc attr list="“ và id=”" ở datalist

<datalist id="LanguageDataList">
	<option value="San Francisco">
	<option value="New York">
	<option value="Seattle">
	<option value="Los Angeles">
	<option value="Chicago">
</datalist>

Ngoài ra tôi cũng thiết kế một input cho phép label Placeholder ẩn hiện khi foucs vào vùng input:

<div class="inputContainer">
	<div contenteditable="true"></div>
	<label><i class="iconsax me-1" icon-name="code-1"></i> Placeholder</label>
</div>

Và sau đây là toàn bộ CSS:

/* DIV Input Floating Placeholder */
.inputFloating {
  position: relative;
  outline: none;
  font-size: 0.95rem;
  padding: 10px;
  margin: 15px 0 15px 0;
  color: rgba(var(--theme-color), 0.8);
  background-color: rgba(var(--white), 0.6);
  box-shadow: 0 0 0 1px rgba(var(--light-text), 0.3);
  border-radius: 0.5rem;

  transition: background-color 0.3s ease;
}

.inputFloating:focus-within {
  background-color: rgba(var(--white), 1); /* Màu sắc khi có focus */
}

.inputFloating div, input {
  width: 100%;
  height: 100%;
  min-height: 1em; /* Đảm bảo div có chiều cao tối thiểu */
  outline: none;
  border: none;
  text-align: justify;
  background: rgba(255, 255, 255, 0);
}

.inputFloating img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.inputFloating p + img {
  text-align: center;
}

.inputFloating p {
  font-size: 0.95rem;
  padding-bottom: 10px;
}
.inputFloating p:last-child {
  padding-bottom: 0;
}

.inputFloating label {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  pointer-events: none;
  color: rgba(var(--light-text), 0.8);
  transition: top 0.15s ease, background-color 0.2s ease;
}

.inputFloating input:focus + label,
.inputFloating input:not(:placeholder-shown) + label,
.inputFloating div:focus + label,
.inputFloating div:not(:empty) + label {
  top: 0;
  left: 15px;
  font-size: 0.75em;
  padding: 0px 6px 0px 6px;
  border-radius: 0.5em;
  background-color: rgba(var(--light-bg), 1);
  box-shadow: 0 0 0 0.5px rgba(var(--light-text), 0.3);
}
/**/



/* DIV Input Placeholder */
.inputContainer {
  position: relative;
  outline: none;
  font-size: 0.95rem;
  padding: 10px;
  margin: 15px 0 15px 0;
  color: rgba(var(--theme-color), 0.8);
  background-color: rgba(var(--white), 0.6);
  box-shadow: 0 0 0 1px rgba(var(--light-text), 0.3);
  border-radius: 0.5rem;
  transition: background-color 0.3s ease;
}

.inputContainer:focus-within {
  background-color: rgba(var(--white), 1); /* Màu sắc khi có focus */
}

.inputContainer div, input {
  width: 100%;
  height: 100%;
  min-height: 1em; /* Đảm bảo div có chiều cao tối thiểu */
  outline: none;
  border: none;
  text-align: justify;
  background: rgba(255, 255, 255, 0);
}

.inputContainer label {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 1;
  color: rgba(var(--light-text), 0.8);
  transition: opacity 0.2s ease;
}


.inputContainer input:focus + label,
.inputContainer input:not(:placeholder-shown) + label,
.inputContainer div:focus + label,
.inputContainer div:not(:empty) + label {
  opacity: 0;
}
/**/