html - 如何在html中的单选按钮前面创建一个颜色框？

Question

我想创建一个单选按钮，前面有一个小颜色框。这是我编写的当前代码：

<label class="container"  style="color: #0B9BCD">
   <div class="foo"></div>
   <input type="radio" name="radiobutton" id="highlight1" value="highlight1"/>               
   <span class="checkmark"></span>
</label> 

其中类 foo 具有以下样式：

.foo {
     float: left;
     width: 20px;
     height: 20px;
     margin: 5px;
     border: 1px solid black;
     background: #13b4ff;
  }

我得到的输出是这样的：

如何将颜色框移动到单选按钮的右侧？

标签： htmlcsscheckbox

Answer 1

通过将带有 className "foo" 的 div 移动到无线电输入下方并给容器 adisplay: flex property我们可以实现所需的解决方案。单击此链接以了解有关 flexbox 的更多信息。 https://yoksel.github.io/flex-cheatsheet/

<label class="container">
  <input type="radio" name="radiobutton" id="highlight1" value="highlight1" />
  <div class="foo"></div>
</label>

.foo {
  width: 20px;
  height: 20px;
  border: 1px solid black;
  background: #13b4ff;
}

.container{
  display: flex;
}