Question

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

如何使用CSS创建复选框并检查它们？

通过CSS进行此操作有什么好处？

Answer 1

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

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，它会自动使用轮播选择器，这是一个方便的功能。

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

1 个答案: