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

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

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

.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/

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

你可以试试这个：

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 4

你快到了，问题是输入元素不支持伪元素。这个答案有一些关于原因的更多细节：https://stackoverflow.com/a/4660434/5269101

因此，您的问题的解决方案是： 1-将文本“音乐”、“电影”和“书籍”包装在跨度元素中 2-用::before替换css中的::after，而不是针对输入元素，而是使用兄弟选择器来定位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>