css 自定义为按钮外观的复选框

7z5jn7bk 于 2022-12-30 发布在其他

关注(0)|答案(2)|浏览(156)

我正在尝试创建“复选框”，看起来像一个按钮，能够做到这一点：

我试图自定义一个复选框输入类型来做这件事，但我不能。

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;
}

我在互联网上找不到任何合适的信息来建造这个

css

来源：https://stackoverflow.com/questions/63714426/checkbox-customized-to-look-like-a-button

2条答案

按热度按时间

erhoui1w1#

您可以在此处使用此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;
}

赞(0）回复(0）举报 2022-12-30

bgtovc5b2#

声明

我使用的代码从这个链接：CSS: styled a checkbox to look like a button, is there a hover?
但我也会一步一步地解释。

代码及说明

我将在代码中添加注解以帮助您更好地理解。
1.您要做的是使用input而不是button。

<input type="checkbox" value="1"><span>click me</span>

1.并将输入类型更改为复选框。
1.然后将复选框的css更改为按钮的外观。
x一个一个一个一个x一个一个二个x

赞(0）回复(0）举报 2022-12-30

我来回答

css 自定义为按钮外观的复选框

2条答案

声明

代码及说明

相关问题

热门标签

最新问答