将自定义复选框内的检查/勾号居中 [英] center a check/tick within a custom check box

问题描述

我正在构建一个自定义复选框，功能几乎已经存在，但是样式还有一段路要走。

I am building a custom check box, the functionality is almost there but the styling has a way to go.

我有一些问题，

1. 我需要将检查集中在圆圈内


2. 我只需要在选中复选框后将其激活即可

恐怕我似乎无法在不使用左位置填充的情况下使支票居中。

Im afraid i cant seem to center the check without using padding left of position left.

HTML

<label for='product-45-45'>
  <input type='checkbox' style="float:left;" id='product-45-45' />
  <div class="accord-text">
    <strong>header:</strong> sub text
    <strong>more text!</strong>
  </div>
</label>

CSS

input[type=checkbox] {
  display: none;
}

input[type=checkbox] + .accord-text:before {
  width: 30px;
  height: 30px;
  border-radius: 200%;
  background-color: #d6e4ec;
  border: 1px solid #000;
  display: block;
  font-size: 150%;
  font-weight: 900;
  content: "";
  color: green;
}

input[type=checkbox]:checked + .accord-text:before {
  display: table;
  content: "\2713";
}

推荐答案

• 问题1： text-align：center; 选中复选框ic，然后删除 style = float：left; 从复选框中


• 问题2：从 accord-text div中删除文本并将其放在外面。


• Problem 1: text-align: center; when checkbox ic checked, and remove style="float:left;" from checkbox
• Problem 2: Remove the text from accord-text div and put it outside.

.row{
  display: flex;
  flex-direction: row;
}

input[type=checkbox] {
  display: none;
}

input[type=checkbox] + .accord-text:before {
  width: 30px;
  height: 30px;
  border-radius: 200%;
  background-color: #d6e4ec;
  border: 1px solid #000;
  display: block;
  font-size: 140%;
  font-weight: 900;
  content: "";
  color: green;
}

input[type=checkbox]:checked + .accord-text:before {
  display: table;
  content: "\2713";
  text-align: center;
}

<div class="row">
  <label for='product-45-45'>
  <input type='checkbox' style="float:left;" id='product-45-45' />
  <div class="accord-text">

  </div>
</label>

  <strong>header:</strong> sub text
  <strong>more text!</strong>
</div>

这篇关于将自定义复选框内的检查/勾号居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！