html - 您可以在不使用 input type=checkbox html 元素的情况下创建复选框吗？

Question

我注意到这个网站有一个复选框列表，但是当我查看 HTML 时，我只看到带有 CSS 类的 div。

如何创建复选框并仅使用 CSS 将其选中？

通过 CSS 实现有什么好处？

Answer 1

当然可以。优点是它为您提供了更多的灵 active 。例如，这是一个使用 div 作为复选框的基本 React 组件:

https://jsbin.com/xarewiweza/1/edit?html,js,output

const styles = {
  outer: {
    borderRadius: 5,
    border: '2px solid gray',
    width: 30,
    height: 30,
    cursor: 'pointer',
  },
  inner: checked => ({
    borderRadius: '50%',
    height: 28,
    width: 28,
    backgroundColor: checked ? 'red' : 'transparent',
    margin: 1,
    transition: 'background-color 0.2s ease',
  })
}

class Checkbox extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      checked: false,
    }
  }

  render() {
    console.log(this.state)
    return (
      <div 
        onClick={() => this.setState({ checked: !this.state.checked, })}
        style={styles.outer}>
        <div style={styles.inner(this.state.checked)} />
      </div>
    )
  }
}

ReactDOM.render(<Checkbox />, document.body)

如果您想要动画复选标记或其他很酷的东西，则必须进行自定义。

缺点是您无法获得一些默认的 HTML 功能，但我不确定复选框是否有任何特别有用的功能。例如，对于 iOS 上的默认 select，它会自动使用轮播选择器，这是一个方便的功能。