定制为看起来像按钮的复选框

Question

我正在尝试创建看起来像按钮的“复选框”，以实现此目的：

我正在尝试自定义复选框输入类型来做到这一点，但我不能。

private function validateURLScheme(string $filename) : bool
{
        $allowed_schemes = ['ftp', 'ftps', 'http', 'https'];
        $url = parse_url($filename);
        if ($url && isset($url['scheme']) && !in_array($url['scheme'], $allowed_schemes) && !file_exists($filename)) {
            return false;
        }

        return true;
}

看起来像这样：

即使我在下面应用CSS

const CheckBox = 
      <div className="checkbox-style">
        <input className="checkbox-style" onChange={this.toggleCheck} id={this.id} type="checkbox" checked={this.state.isChecked} />
        <label htmlFor={this.id}>test</label>
      </div>

我无法在Internet上找到任何合适的信息来构建它

Answer 1

您可以使用此S.O.中的代码在这里提问：CSS: styled a checkbox to look like a button, is there a hover?

万一链接停止工作，这是代码。

<div id="ck-button">
   <label>
      <input type="checkbox" value="1"><span>red</span>
   </label>
</div>

#ck-button {
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
    float:left;
}

#ck-button label {
    float:left;
    width:4.0em;
}

#ck-button label span {
    text-align:center;
    padding:3px 0px;
    display:block;
}

#ck-button label input {
    position:absolute;
    top:-20px;
}

#ck-button input:checked + span {
    background-color:#911;
    color:#fff;
}
#ck-button:hover {
    background:red;
}