用纯 div 实现一个选中和未选中状态

news2024/12/27 12:45:28

在现代网页设计中，利用 div 元素自定义样式，可以让界面更具有吸引力。通过一些简单的 CSS 样式和布局技巧，可以轻松实现交互自然的选中和未选中效果，而不需要依赖传统的 input 元素。

举个 🌰

HTML

<body>
  <div class="container">
    <div class="checkbox"></div>
    <input type="text" class="editor" />
  </div>
  <div class="output" style="margin-top: 10px"></div>
</body>

CSS

.container {
  cursor: pointer;
  display: flex;
  align-items: center;
}
.checkbox {
  width: 15px;
  height: 15px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  border-radius: 3px;
  transition: 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkbox:hover,
.checkbox.checked {
  border-color: #409eff;
}

.checkbox.checked::after {
  content: '';
  border-radius: 2px;
  width: 9px;
  height: 9px;
  background: #409eff;
}

.editor {
  border: none;
  outline: none;
  margin-left: 5px;
  border-bottom: 1px solid #dcdfe6;
  font-size: inherit;
}

const checkbox = document.querySelector('.checkbox');
const editor = document.querySelector('.editor');
const output = document.querySelector('.output');

editor.addEventListener('keydown', (e) => {
  if (e.target.value !== '') {
    checkbox.classList.add('checked');
  }
  if (e.key === 'Enter' && e.target.value !== '') {
    output.innerHTML += `<div>${e.target.value}</div>`
    editor.value = '';
    checkbox.classList.remove('checked');
  }
});

最终的效果为：