相关疑难解决方法(0)

我想知道是否有人知道在html中显示一个带有黑框的复选框的好方法,如下图中的第三个复选框？

我已经在很多界面中看到了这一点,但是在网上找不到一个好的来检查源代码.如果这已经发布在其他地方,我很抱歉,但我没有幸运地使用我一直在尝试的搜索字词.

谢谢.

如果自定义样式复选框处于活动状态（选中），我想将背景颜色更改为绿色。我试过这个

网页

    <div class="checkboxOne">
        <input type="checkbox" value="1" id="checkboxOneInput" name="" />
        <label for="checkboxOneInput"></label>
    </div>

CSS

input[type=checkbox] {
    visibility: hidden;
}

.checkboxOne {
    width: 40px;
    height: 10px;
    background: #9c9d9d;
    margin: 20px 80px;
    position: relative;
    border-radius: 3px;
box-shadow: inset 0px 0px 2px #565656;
}

.checkboxOne label {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
    cursor: pointer;
    position: absolute;
    top: -4px;
    left: -3px; …

如何使我的复选框透明？它确实适用于文本字段和按钮，但似乎不适用于复选框。这是我的代码的形式。

#checkbox {
  width: 20px;
  height: 20px;
  cursor: pointer;
  vertical-align: bottom;
  color: black;
  background-color: rgba(0, 0, 0, 0.08);
}

<div class="checkbox check-transparent">
  <label>
      <input type="checkbox" id="checkbox">Onthoud mij
  </label>
</div>

我有一个非常简单的问题，但我找不到一个简单的答案。

我有一个如下所示的复选框：

<input type="checkbox">

我想在选中此复选框时仅更改背景颜色。

有没有一种简单的方法可以在 CSS 或 JS 中做到这一点？

我工作的公司有一个内部扩展的引导课程。我在使用他们提供的复选框时遇到困难，因此我必须深入研究他们的代码。我从这个 HTML 片段开始：

<div class="checkbox XXXbs-checkbox">                
    <label for="checkbox-id">Some Text</label>
    <input class="form-control" id="checkbox-id" name="checkbox-name" role="checkbox" type="checkbox" value="y">
</div>

他们的复选框 css 包含此内容（“XXX”代替了标识我工作的公司的字符串）：

.XXXbs-checkbox input[type=checkbox] {
    opacity: 0;
    margin-left: 4px;
    cursor: pointer;
    z-index: 1;
    width: 100%;
}

不透明度为 0，使上述 HTML 中的实际复选框不可见。同时，他们还有这样的：

.XXXbs-checkbox>label::before {
    font-family: XXX-icon;
    content: "\e903";
    font-size: 32px;
    position: absolute;
    top: -15px;
    left: 0;
}

在标签前放置一个空复选框，如下：

.XXXbs-checkbox>input[type=checkbox]:checked+label::before {
    content: "\e904";
    color: #000
}

渲染一个带有复选标记的框。

我的问题是，为什么要使用这种方法？为什么要在标签前面绘制一个假复选框，而不是仅设计实际复选框的样式？

我试图自定义设计复选框按钮,使它们看起来不像典型的复选框按钮.我试图实现以下目标:

(注意检查和交叉标记是图像.)

到目前为止,我已经能够实现这一目标:

但我似乎无法摆脱勾选出现的小白色复选框.我想在选择时更改复选框按钮的CSS.例如,是,检查边框变为绿色,否则保持灰色.

有可能吗？

编辑:

.btn-primary {
  background-color: #f6f9fc;
  border: 1px solid Rgba(61, 70, 77, 0.1);
  font-size: 11px;
  color: #3d464d;
  width: 200px;
  height: 200px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

<label class="btn btn-primary">
  <input type="checkbox" value="yes">yes
</label>

<label class="btn btn-primary">
  <input type="checkbox" value="no">no
</label>