如何制作下方带有文字的Toggle Button？附当前代码

我来给你分享几种实用的实现方式，不管你用原生前端还是框架，都能快速搞定需求：

原生HTML+CSS+JS基础实现 #

这是最通用的方案，不需要依赖任何第三方库：

完整代码示例 #

<!-- HTML结构 -->
<label class="toggle-wrapper">
  <input type="checkbox" class="toggle-checkbox">
  <span class="toggle-slider">
    <span class="toggle-label">关闭</span>
  </span>
</label>

/* CSS样式 */
.toggle-wrapper {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-family: sans-serif;
}

.toggle-checkbox {
  display: none; /* 隐藏原生复选框，用自定义样式替代 */
}

.toggle-slider {
  width: 85px;
  height: 34px;
  background-color: #e0e0e0;
  border-radius: 17px;
  position: relative;
  transition: background-color 0.3s ease;
  display: flex;
  align-items: center;
  padding: 0 5px;
  box-sizing: border-box;
}

.toggle-label {
  font-size: 14px;
  color: #fff;
  position: absolute;
  right: 10px;
  transition: all 0.3s ease;
}

/* 选中状态的样式切换 */
.toggle-checkbox:checked + .toggle-slider {
  background-color: #4CAF50;
}

.toggle-checkbox:checked + .toggle-slider .toggle-label {
  left: 10px;
  right: auto;
}

// JS逻辑：监听状态变化并更新文字
const toggleCheckbox = document.querySelector('.toggle-checkbox');
const toggleLabel = document.querySelector('.toggle-label');

toggleCheckbox.addEventListener('change', () => {
  toggleLabel.textContent = toggleCheckbox.checked ? '开启' : '关闭';
});

实现说明 #

• 用<label>包裹复选框和滑块，点击整个区域都能触发切换，提升交互体验
• 隐藏原生复选框，通过自定义滑块模拟Toggle的视觉效果
• 利用CSS的:checked伪类实现状态切换，配合JS动态更新显示文字

React框架封装组件方案 #

如果你的项目基于React，可以把Toggle Button封装成可复用组件：

import { useState } from 'react';

const TextToggle = ({ 
  initialChecked = false, 
  onText = '已开启', 
  offText = '已关闭',
  activeColor = '#4CAF50',
  inactiveColor = '#e0e0e0'
}) => {
  const [isChecked, setIsChecked] = useState(initialChecked);

  const handleToggle = () => {
    setIsChecked(prev => !prev);
  };

  return (
    <label style={{ 
      display: 'inline-flex', 
      alignItems: 'center', 
      cursor: 'pointer',
      fontFamily: 'sans-serif'
    }}>
      <input
        type="checkbox"
        checked={isChecked}
        onChange={handleToggle}
        style={{ display: 'none' }}
      />
      <div
        style={{
          width: '85px',
          height: '34px',
          borderRadius: '17px',
          backgroundColor: isChecked ? activeColor : inactiveColor,
          position: 'relative',
          transition: 'background-color 0.3s ease',
          display: 'flex',
          alignItems: 'center',
          padding: '0 5px',
          boxSizing: 'border-box'
        }}
      >
        <span
          style={{
            fontSize: '14px',
            color: '#fff',
            position: 'absolute',
            transition: 'all 0.3s ease',
            left: isChecked ? '10px' : 'auto',
            right: isChecked ? 'auto' : '10px'
          }}
        >
          {isChecked ? onText : offText}
        </span>
      </div>
    </label>
  );
};

// 使用示例：<TextToggle onText="启用" offText="禁用" />

小技巧 #

• 你可以根据需求调整滑块的尺寸、颜色、字体大小等样式
• 如果需要添加滑动圆点效果，只需在滑块内新增一个绝对定位的圆形元素，配合:checked伪类修改其位置即可

内容的提问来源于stack exchange，提问作者Rick