Question

我有以下html设置：

<fieldset>
  <div class="checkbox">
    <label class="justlabel"><input type="checkbox" value="movie"> Movies</label>
  </div>
  <div class="checkbox">
    <label class="justlabel"><input type="checkbox" value="music"> Music</label>
  </div>
  <div class="checkbox">
    <label class="justlabel"><input type="checkbox" value="books"> Books</label>
  </div>
</fieldset>

这是我的小提琴：https://jsfiddle.net/z7aymz5a/20/

我按其值定位每个复选框，因为所有类都相同。

我想要实现的是在每个复选框后面放一个彩色圆圈，就在标签之前，如下图所示

我把圆圈放进去了，但我无法弄清楚如何正确地设计它，所以它位于复选框后面，但在标签之前。

任何人都可以帮我解决这个问题吗？

Answer 1

你可以试试这个：

input {
  width: 32px;
}
input::after {
  font-size: 19px;
  line-height: 12px;
  content: "\25CF";
  margin-left: 24px;
}
input[value="movie"]::after {
  color: red;
}
input[value="music"]::after {
  color: blue;
}
input[value="books"]::after {
  color: green;
}

Answer 2

没有触及html和正确定位

    input {
        margin-right: 20px;
    }

    input::after {
        content: "\25CF";
        font-size: 30px;
        position: relative;
        top: -12px;
        right: -16px;
    }
    input[value="movie"]::after {
        color: red;
    }

    input[value="music"]::after {
        color: blue;
    }

    input[value="books"]::after {
        color: green;
    }

Answer 3

你几乎就在那里，问题是输入元素不支持伪元素。这个答案有更详细的原因：https://stackoverflow.com/a/4660434/5269101

因此，解决您的问题的方法是： 1-在span元素中包含文本“music”，“movies”和“books” 2-用::after替换css中的::before，而不是定位输入元素，使用兄弟选择器定位span元素。

你的css看起来像这样：

input[value="movie"] ~ span::before {
color: red;
content: "\25CF";
font-size: 2.5em;
}

input[value="music"] ~ span::before {
color: blue;
content: "\25CF";
font-size: 2.5em;
}

input[value="books"] ~span::before {
color: green;
content: "\25CF";
font-size: 2.5em;
}

你的HTML将是：

<fieldset>
  <div class="checkbox">
  <label class="justlabel"><input type="checkbox" value="movie"> <span>Movies</span></label>
  </div>
  <div class="checkbox">
    <label class="justlabel"><input type="checkbox" value="music"> <span>Music</span></label>
  </div>
  <div class="checkbox">
    <label class="justlabel"><input type="checkbox" value="books"> <span>Books</span></label>
  </div>
</fieldset>

Answer 4

您可以通过更简单的方式实现此目的。只需在标签中添加标签之前的标签，然后根据需要对其进行格式化。

.checkbox {
  position: relative;
}
.circle {
  border-radius: 50%;
  width: 12px;
  height: 12px;
  display: inline-block;
  margin-right: 5px;
}
.movie {
  background-color: red;
 }

.music {
  background-color: blue;
}

.books {
  background-color: green;
}

你的HTML：

<fieldset>
  <div class="checkbox">
    <label class="justlabel"><input type="checkbox" value="movie"> 
    <i class="circle movie"></i>Movies</label>
  </div>
  <div class="checkbox">
    <label class="justlabel"><input type="checkbox" value="music"> 
    <i class="circle music"></i>Music</label>
  </div>
  <div class="checkbox">
    <label class="justlabel"><input type="checkbox" value="books"> 
    <i class="circle books"></i>Books</label>
  </div>
</fieldset>

小提琴：https://jsfiddle.net/kjcqqh44/13/

<强>更新

对于插件提供的动态HTML，您可以使用此代码，您可以使用javascript添加圆圈

var checkCircle = document.body.querySelectorAll('input[value][type="checkbox"]');
var checkbox = document.body.querySelectorAll('.checkbox');

for (i=0; i < checkbox.length; i++)
{ 
    var inp = checkbox[i].querySelectorAll('input[value][type="checkbox"]')[0]
  var span = document.createElement('i');
  span.className = 'circle ' + inp.value;
  inp.parentNode.insertBefore(span, inp.nextSibling);
}

https://jsfiddle.net/kjcqqh44/32/

CSS - 选择器 - 复选框和标签之间的额外内容

4 个答案: