再次关于输入类型的可视化复选框和单选框。对于那些忘记了如何

原来，这个话题已经很久了，已经忘记了。



最近，我在为长期存在的项目进行现代化的技术规范开发方面做的工作很短。尤其是，该案例涉及臭名昭著的<input type =“ checkbox”>的样式。原来，表演者，“各行各业的程序员”甚至都不理解我是在用语言向他解释如何做。我不得不举一些例子，结果出现了这段文字。



让我提醒您，现在不同站点对复选框和单选框的描述有所不同。碰巧无法立即识别未标记的输入-它是如此“设计精美”，并且在最新版本的Chrome中，选中的复选框已变成青绿色。

这样的情况

有三家公司使用与订单，会计，仓库等相关的某种软件产品。与客户，合作伙伴，表演者等进行合作。



营销商和广告商也使用它。该系统的功能-无论说什么-都没关系。



而且重要的是，该产品的站点上有许多页面，这些页面的表单上有许多输入复选框和单选框。

员工投诉

导演：在大屏幕上，“ kryzhiki”很难看清并且看不见。

总会计师：在我的计算机上，“ kryzhiki”的外观是这样的，在员工上，它看起来是不同的，在家里它也是不同的，但是在平板电脑上，它是完全不同的。

营销人员：是否有可能使一些未选中的职位变成红色，而其他选中的职位变成绿色？

等等。

所以任务

1. 以最小的成本和最少的更改来固定复选框和单选框的外观。
2. 为不同的用户设置复选框和单选框样式。重要提示：这是一个封闭的站点，这里有“我们自己所有”，不需要“美容”，但是需要有效的感知。

不允许什么

1.请勿触摸服务器端。

2.您无法触摸javascript文件，无法插入自己的javascript。

3.无法触摸css文件。

允许什么

1.编辑html模板。

2.为所有用户创建样式文件。

4.为特定用户或一组用户创建样式文件。

您所做的一切都可以立即查看codepen.io，但是最好进一步阅读。

初步研究表明

1.几乎所有<input type =“ checkbox”>都有一个名称字段，而那些没有id的字段。

2.所有<input type =“ radio”>都有一个名称字段，有些有一个ID。

3.因此，在CSS中，可以通过ID和名称来访问该复选框。广播-通过ID或父母的子女编号。



源代码段：

/*  1 */
<tag><input type="checkbox">  </tag>

/*  2 */
<tag><input type="checkbox">  <br>
<input type="checkbox">  </tag>

/*  3 */
...<label><input type="checkbox">  </label>...

/*  4 */
<td><input id="idxxx" type="checkbox"></td>
<td><label for="idxxx"> </label></td>

让我们修复代码：

/*  1 */
<tag><label class="new-input"><input type="checkbox"><s></s><span> </span></label></tag>

/*  2 */
<tag><label class="new-input"><input type="checkbox"><s></s><span> </span></label><br>...</tag>

/*  3 */
...<label class="new-input"><input type="checkbox"><s></s><span> </span></label>...

/*  4 */
<td><label class="new-input new-input-one"><input id="idxxx" type="checkbox"><s></s></label></td>
<td><label for="idxxx"> </label></td>

<input type =“ radio”>的所有内容都相同，LABEL的类别相同。

你到底是做什么的？

1. 每个输入（选项3的尾部）已在我们的类中用LABEL标签包装。选项3刚刚添加了一个类。
2. 在输入之后，我们立即插入了一个空的S标签，由于该输入本身将不可见，因此该标签将呈现此输入。
3. 随附的文本用SPAN标记包裹（选项4除外）。当我们决定将视觉输入相对于此文本对齐的问题时，将需要此标签。
4. 选项4被添加另一个类以避免这种对齐方式，因为随附的文本在表的另一个单元格中。严格来说，有必要做相反的事情-将负责对齐的类添加到选项1-3。但是，还有比第4个选项更多的1-3选项，并且为了不使html膨胀，它是这样完成的。

有关框大小调整的一些初步考虑和css调整：边框框，LABEL归一化，A + B，A〜B和[attr]选择器，：选中，禁用和::在伪类之前。不确定谁知道或想要更新其知识的人都会被削减。

所以，让我们开始渲染输入

例N 1.最简单的一个-我们使用字母字符

。html代码是相同的，并且css将如下所示：

/* s1 */
.new-input > INPUT + S::before {
  content: "c";
}
/* s2 */
.new-input > INPUT:checked + S::before {
  content: "V";
}
/* s3 */
.new-input > INPUT[type="radio"] + S::before {
  content: "r";
}
/* s4 */
.new-input > INPUT[type="radio"]:checked + S::before {
  content: "X";
}
/* s5 */
.new-input > INPUT:disabled + S::before {
  opacity: 0.5;
}
/* s6 */
.new-input > S {
  text-decoration: none;
  margin-left: 3px;
  margin-right: 6px;
}
/* s7 */
.new-input > S::before {
  display: inline-block;
  width: 1.25em;
  text-align: center;
  color: #fafafa;
  background-color: #37474f;
}
/* s8 */
.new-input > INPUT[type="radio"] + S::before {
  border-radius: 50%;
}

S标签将呈现输入。但是我们将其按功能“划分”：S标签本身将负责放置在LABEL中并相对于下一个SPAN进行对齐。



伪元素S :: before将放置在S标记内，并作为输入。s1



行定义在未选择输入时将哪个字符放置在S ::中。原则上，有必要编写“ .new-input> INPUT：不（：选中）+ S ::之前”，但是某些浏览器（例如IE）可能不执行这种构造。 字符串s2指定选择输入时的字符。s3和s4 线路对输入无线电执行相同操作。 弦s5





描述了如果输入被阻止会发生的情况-在这种情况下，S标签将是半透明的。

线S6限定的取向，在这种情况下它给填充到左和右（仅在该实施例中）。另外，它消除了常规的删除线。

线s7形成一个正方形，s8将其变成一个圆圈，用于输入广播。



示例1可以在codepen.io上查看。有本机输入和新输入。前者可以删除。







问题：



可以使用特殊字符吗？像这样：

□■▢▣○●◎◉

给他们合适的尺寸即可。没有？



答：



可以。但是您不需要。因为会有大量的痔疮和铃鼓在所需的大小，垂直对齐，修剪等方面分配。另外，不同的浏览器使用这些符号的方式也不同。

我们走了另一条路。尽管最后一个示例包含了此想法的实现。



例N 2.使用CSS“绘制”输入元素



html代码相同，但是CSS如下所示：

/* s1 */
.new-input > S::before {
  content: "";
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  border: 1px solid currentColor;
  padding: 2px;
  background-clip: content-box;
  border-radius: 20%;
}
/* s2 */
.new-input > INPUT[type="radio"] + S::before {
  border-radius: 50%;
}
/* s3 */
.new-input > INPUT:checked + S::before {
  background-color: currentColor;
}
/* s4 */
.new-input > INPUT:disabled + S::before {
  opacity: 0.5;
}
/* s5 */
.new-input > S {
  text-decoration: none;
  margin-left: 3px;
  margin-right: 6px;
}

s1 行在渲染输入之前定义了S ::。这将是一个内联块，其宽度和高度设置为0.75em，这大约是大写字母的高度，并取决于父级的字体大小。使用当前颜色，内部填充，小圆角设置细边框。而最重要的！ -属性background-clip：设置了内容框。这是一个非常有趣的属性-如果设置了背景颜色，则它将仅绘制内容部分，并且不会影响填充。我们需要的。无线电输入



的s2线在回合前为S ::。标记输入

的s3线将S ::设置为背景色之前的当前颜色。也就是说，它在内部“绘制”正方形或圆形。

线s4解锁输入，s5行在左侧和右侧进行填充。



这种方法的优点

1. 一切都非常简单。适用于所有浏览器。甚至是IE10（在第11版中也是如此）。
2. 您可以根据需要着色。
3. 由于S :: before是内联块，因此它恰好位于基线的底部，并且不会在任何地方离开它。如果它的高度大于文本的高度，它将仅增加行高并停留在基线上。
4. 由于输入的可视化位于S标记内，因此可以轻松地对其进行定位和对齐。
5. em中S :: before的尺寸使得可以相对于字幕文本的尺寸设置其尺寸。例如，您可以设置高度和宽度的限制。

这种方法的缺点



主要在em尺寸上。事实是，当计算时的宽度和高度（从em到px）具有分数时，可能会出现这种情况。在具有正常屏幕的普通计算机上，舍入可能无法正常工作。例如，同一Mozila中的12.8px x 12.8px尺寸可以变为13px x 12px。然后，您需要设置固定大小。尽管在现代显示器和视频卡，笔记本电脑，平板电脑和智能手机上，由于浏览器的点（像素）由几个屏幕像素组成这一事实而不会发生。



示例2可以在codepen.io上查看。有本机输入和新输入。前者可以删除。

这样，第一个任务-渲染输入-完成了。我们传递给选定的“着色”。

着色输入

以html为例：

<label class="new-input"><input name="chb1" type="checkbox" ...><s></s><span> </span></label>
<label class="new-input"><input id="rb1" type="radio" ...><s></s><span> </span></label>

我们将通过名称引用复选框类型的输入，通过ID引用单选。



我们把所有东西都涂成蓝色

/*  input */
.new-input > INPUT[name="chb1"] + S,
.new-input > INPUT#rb1 + S {
  color: #0091ea;
}
/*  text */
.new-input > INPUT[name="chb1"] ~ SPAN,
.new-input > INPUT#rb1 ~ SPAN {
  color: #0091ea;
}
/*   */
.new-input > INPUT[name="chb1"] ~ *,
.new-input > INPUT#rb1 ~ * {
  color: #0091ea;
}

记住css的特殊性，这些样式将比基本样式更具体，并且肯定会起作用。它们与上述描述有何不同？仅适用于选择输入的那些-具有指定名称和ID值的那些。



这里的一切都很好，只是未选择的输入看起来不太好-细的蓝色边框很难察觉。



选择输入时将其涂成绿色

/*  input */
.new-input > INPUT[name="chb1"]:checked + S,
.new-input > INPUT#rb1:checked + S {
  color: #00c853;
}
/*  text */
.new-input > INPUT[name="chb1"]:checked ~ SPAN,
.new-input > INPUT#rb1:checked ~ SPAN {
  color: #00c853;
}
/*   */
.new-input > INPUT[name="chb1"]:checked ~ *,
.new-input > INPUT#rb1:checked ~ * {
  color: #00c853;
}

我认为第一种选择不是很好-框架和内部正方形/圆形都将变为绿色。您只能为其着色。

/*  input    */
.new-input > INPUT[name="chb1"]:checked + S::before,
.new-input > INPUT#rb1:checked + S::before {
  background-color: #00c853;
}

未选择输入时为红色

/*  input */
.new-input > INPUT[name="chb1"]:not(:checked) + S,
.new-input > INPUT#rb1:not(:checked) + S {
  color: #d50000;
}
/*  text */
.new-input > INPUT[name="chb1"]:not(:checked) ~ SPAN,
.new-input > INPUT#rb1:not(:checked) ~ SPAN {
  color: #d50000;
}
/*   */
.new-input > INPUT[name="chb1"]:not(:checked) ~ *,
.new-input > INPUT#rb1:not(:checked) ~ * {
  color: #d50000;
}

逻辑清楚吗？您可以继续进行更复杂的设计。



例如，如果未选择输入，则文本应为红色和粗体，如果选择内部输入元素和文本，则应为绿色。初级！

/* ,    */
.new-input > INPUT[name="chb1"]:not(:checked) ~ SPAN,
.new-input > INPUT#rb1:not(:checked) ~ SPAN {
  color: #d50000;
  font-weight: bold;
}
/*   input,   */ 
.new-input > INPUT[name="chb1"]:checked + S::before,
.new-input > INPUT#rb1:checked + S::before {
  background-color: #00c853;
}
/* ,   */ 
.new-input > INPUT[name="chb1"]:checked ~ SPAN,
.new-input > INPUT#rb1:checked ~ SPAN {
  color: #00c853;
}

并且，例如，您需要处理一整组输入（10-15件）。为了不写很多行，您可以找到它们的公共父级（.parent_element）并缩短条件。

.parent_element > .new-input > INPUT:not(:checked) ~ SPAN {
  color: #d50000;
  font-weight: bold;
}
.parent_element > .new-input > INPUT:checked + S::before {
  background-color: #00c853;
}
.parent_element > .new-input > INPUT:checked ~ SPAN {
  color: #00c853;
}

您可以在codepen.io的最后一个示例中看到所有



内容。它仅仅是“擦伤完美主义者的胎记”-对准问题。

对齐视觉输入和随附文本

首先，让我提醒您有关文本放置，格式等方面的众所周知的事情。一切都在削减。





如果SPAN中随附的文本显示为两行或三行会怎样？显然，它将在输入下“适合”。它不漂亮，需要修复。



一种古老的方法是：S标签为float：向左，而SPAN标签为display：block和overflow：隐藏。



这将创建一列文本。假定其中一些具有适当的边距，这将在它们之间跳过。好吧，在SPAN之后，随着浮球的终止，还会增加痔疮。我们将采用现代路线-使用flexbox。他在这里完全不合适。

.new-input {
  display: flex;
  flex-direction: row;
  align-items: start;
}
.new-input > S {
  margin-right: 4px;
  flex: 0 0 auto;
}
.new-input > SPAN {
  flex: 0 1 auto;
}

在这种情况下，LABEL标记（.new-input）将为flex，S和SPAN将为块，放置在LABEL的顶部。如有必要，SPAN中的文本将多行显示。因此，之前在S ::中描述了视觉输入。无论高度如何，SPAN S :: before都将与第一条SPAN行对齐。或者，您可以指定align-items：center-然后使用单行SPAN，视觉输入将在顶部，中间两行，第二行三行。在最后一个示例中，您可以切换输入的位置。

就这样

我希望这对某人是有趣且有用的。请不要责骂我太多-这是我第一次在Habr上的经历。



例1只是演示更改输入和相邻元素之间相互作用的示例。



示例N 2-使用css可视化输入，作为解决方案的基础。



最后一个示例是一起描述的所有内容。

关于具体实施

有广泛的形式，其中可以由特定用户编辑的字段块以模糊的背景突出显示，其余输入具有Disabled属性并且仅用于提供信息。因此，未应用样式“ .new-input> INPUT：禁用+ S ::之前”。

UPD

回应评论例N 3。

对于工作中的隐藏输入，有关键和重点支持。