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>
看起来像这样:
即使我正在应用下面的 css
.checkbox-style {
border-width: 2px;
border-color: #ff7255;
}
我在 Internet 上找不到任何合适的信息来构建它
解决方案
您可以在此处使用此 SO 问题中的代码:CSS:将复选框设置为看起来像按钮,是否有悬停?
如果链接停止工作,这里是代码。
<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;
}