css - Bootstrap Paper 的单选/复选框输入的 Material 风格在 IE/FF 中被破坏

Question

根据Google's Material guidelines for selection controls (复选框、单选按钮、开关)，这些输入字段应如下所示:



Bootstrap Paper Theme for v3.x (现在称为 Materia in v4 )的样式旨在达到此设计目标

在 chrome 中，输入的样式是正确的，但所有其他浏览器只是回退到 native 输入控件，这破坏了设计隐喻的一致性。

这是 jsFiddle 中的 MCVE/堆栈片段将根据浏览器工作/失败:

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/paper/bootstrap.min.css" rel="stylesheet"/>


<div class="checkbox">
  <label><input type="checkbox" value="check1"/> Check Opt 1 </label>
</div>
<div class="checkbox">
  <label><input type="checkbox" value="check2" checked/> Check Opt 2</label>
</div>

<div class="radio">
  <label><input type="radio" value="radio1" name="grp1" />Radio Opt 1</label>
</div>
<div class="radio">
  <label><input type="radio" value="radio2" name="grp1" checked/>Radio Opt 2</label>
</div>

以及前面的代码在每个浏览器中的表现:



是否有可能的解决方法，或者我们是否受浏览器的摆布来设置他们认为合适的输入样式？

在 github issue #497 的元素问题页面上也提出了这个问题。 ，但关闭引用浏览器不兼容

Answer 1

Paper Theme 的实现面临的核心问题是它通过设置 <input type="checkbox" /> 的样式来实现。使用 :before 的元素或 :after伪元素。

根据 W3C specs这个答案在 can I use a pseudo-element on an input field?

:before and :after render inside a container and <input>s can not contain elements

它在 chrome 中工作的事实是异常(exception)，而不是规则，但我们并没有不走运......

纯 CSS 方法

因此，我们希望避免在实际复选框本身中设置任何样式，但我们可以将这些相同样式应用于标签，这仍将切换它所描述的复选框。

第一步 - 基于标签的切换

我们必须重新构建 HTML 以便复选框出现在标签之前，而不是在标签内部。我们将这样做，以便我们可以使用 :checked和相邻的兄弟选择器 +根据是否选中复选框有条件地设置标签的样式。

<!-- Old Format -->
<div class="checkbox">
  <label>
    <input type="checkbox" value="check1"/>
    Check Label Text
  </label>
</div>

<!-- New Format -->
<div class="label-check">
   <input type="checkbox" value="check1" id="myCheck">
   <label for="myCheck">Check Label Text</label>
</div>

Note: In order for this solution to work, you do need to make sure that you have valid HTML with unique IDs for every input and corresponding for attributes in the labels that describe them.

此时，我们可以放弃输入，并使用我们自己的 :before 设置标签样式看起来像复选框或单选按钮的伪元素。现在为了简单起见，在第一步中，我们可以使用以下 Unicode 字符来模拟控件... ☐ , ☑ , ⭘ , ◉

这是一个简单的版本，其中包含 CSS 的基本要点，可以有条件地设置每个标签的样式:

input[type='checkbox'],[type='radio']     { display: none; }
[type='checkbox']         + label::before { content: "\2610";}
[type='checkbox']:checked + label::before { content: "\2611";}
[type='radio']            + label::before { content: "\2B58";}
[type='radio']:checked    + label::before { content: "\25C9";}

我们还可以通过添加一些着色、悬停效果、光标属性、过渡效果和文本阴影来对这个基线进行相当多的改进，以使 unicode 字符看起来和感觉像实际的按钮。

这是 jsFiddle 中更充实的演示和堆栈片段:

body {
  font-size:1.3em;
  color: #2b2b2b;
  background:white;
}
.label-check input {  display:none; }

.label-check label::before {
  width: 1.4em;
  text-align: center;
  display: inline-block;
  cursor: pointer;
  color: black;
  transition: color .3s ease;
  text-shadow: 0px 0px 1px #cccccc;
}
.label-check label:hover::before {
  text-shadow: 0px 0px 1px #6286d0;
}
.label-check [type='checkbox']:checked + label::before,
.label-check [type='radio']:checked    + label::before{ 
  color: #056dce;
}

.label-check [type='checkbox']         + label::before { content: "\2610";}
.label-check [type='checkbox']:checked + label::before { content: "\2611";}
.label-check [type='radio']            + label::before { content: "\2B58";}
.label-check [type='radio']:checked    + label::before { content: "\25C9";}

<h3>
  Inputs... we don't need no stinkin Inputs
</h3>

<div class="label-check">
  <div>
    <input type="checkbox" name="checkGrp1" id="check1_Opt1">
    <label for="check1_Opt1">A Label Here 1</label>
  </div>
  <div>
    <input type="checkbox" name="checkGrp1" id="check1_Opt2" checked>
    <label for="check1_Opt2">A Label Here 2</label>
  </div>
</div>

<div class="label-check">
  <div>
    <input type="radio" name="radioGrp1" id="radio1_Opt1">
    <label for="radio1_Opt1">Radio Label 1</label>
  </div>
  <div>
    <input type="radio" name="radioGrp1" id="radio1_Opt2" checked>
    <label for="radio1_Opt2">Radio Label 2</label>
  </div>  
</div>

第二步 - 将 Material 样式应用于 label:before与 CSS

通过使用标签的风格化伪元素作为游戏中的切换的概念，我们可以应用 Paper 的样式/CSS 而不仅仅是 { content: "\2610";}给我们的复选框一个 Material 的外观和感觉。

为此，让我们看看样式应该如何工作。我们可以在 bootstrap.css#L7182 中查看 Github 上描述检查和 radio 的源代码。
:after :before当框为 :checked 时，元素添加内部选择.

以下是 的高级样式复选框 :

Note: The check mark is made by rotating a rectangle 45 degrees and adding a white border to the bottom and right.

这是 样式的高级 View 单选按钮 :

Note: The radio button container and inside is just a regular CSS circle (border-radius:50%) with varying sizes which can animate by scaling up or down.

因此，我们将在复选框输入中找到的任何伪元素迁移到它的相邻标签，如下所示:

/* old */ input[type="radio"]:before
/* new */ input[type="radio"] + label:before

经过一些仔细的转换，这里有一个 jsFiddle 中的演示和堆栈片段:

body {
  padding: 0 25px;
  font-size: 1.2em;
}


.checkbox, .radio {
    margin: 10px;
}
.checkbox, .radio {
    position: relative;
}


.label-check label {
  padding-left: 20px;
}
.label-check input[type="radio"],
.label-check input[type="checkbox"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
    opacity: 0;
    position: absolute;
    margin: 0;
    z-index: -1;
    width: 0;
    height: 0;
    overflow: hidden;
    left: 0;
    pointer-events: none;
}
.label-check input[type="radio"]:focus {
  outline: none;
}
.label-check input[type="radio"] + label:before,
.label-check input[type="radio"] + label:after {
  content: "";
  display: block;
  position: absolute;
  left: -10px;
  top: 1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  -webkit-transition: 240ms;
  -o-transition: 240ms;
  transition: 240ms;
}
.label-check input[type="radio"] + label:before {
    left: -8px;
    top: 3px;
}
.label-check input[type="radio"] + label:before {
  background-color: #2196f3;
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
       -o-transform: scale(0);
          transform: scale(0);
}
.label-check input[type="radio"] + label:after{
  top: 1px;
  border: 2px solid #666666;
  z-index:1;
}
.label-check input[type="radio"]:checked + label:before {
  -webkit-transform: scale(0.6);
      -ms-transform: scale(0.6);
       -o-transform: scale(0.6);
          transform: scale(0.6);
}
.label-check input[type="radio"]:disabled:checked + label:before {
  background-color: #bbbbbb;
}
.label-check input[type="radio"]:checked + label:after {
  border-color: #2196f3;
}
.label-check input[type="radio"]:disabled + label:after,
.label-check  input[type="radio"]:disabled:checked + label:after {
  border-color: #bbbbbb;
}
.label-check input[type="checkbox"]:focus {
  outline: none;
}
.label-check input[type="checkbox"]:focus + label:after{
  border-color: #2196f3;
}
.label-check input[type="checkbox"] + label:after {
  content: "";
  position: absolute;
  top: 2px;
  left: -10px; 
  display: block;
  width: 18px;
  height: 18px;
  margin-top: -2px;
  margin-right: 5px;
  border: 2px solid #666666;
  border-radius: 2px;
  -webkit-transition: 240ms;
       -o-transition: 240ms;
          transition: 240ms;
}
.label-check input[type="checkbox"]:checked + label:before {
  content: "";
  position: absolute;
  top: 2px;
  left: -3px;
  display: table;
  width: 6px;
  height: 12px;
  border: 2px solid #fff;
  border-top-width: 0;
  border-left-width: 0;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
       -o-transform: rotate(45deg);
          transform: rotate(45deg);
  z-index:1;
}
.label-check input[type="checkbox"]:checked + label:after{
  background-color: #2196f3;
  border-color: #2196f3;
}
.label-check input[type="checkbox"]:disabled + label:after {
  border-color: #bbbbbb;
}
.label-check  input[type="checkbox"]:disabled:checked + label:after {
  background-color: #bbbbbb;
  border-color: transparent;
}

<h3>
 Material Label Based Checks
</h3>

<div class="label-check">
  <div class="checkbox">
    <input type="checkbox" name="checkGrp1" id="check1_Opt1">
    <label for="check1_Opt1">A Label Here 1</label>
  </div>
  <div class="checkbox">
    <input type="checkbox" name="checkGrp1" id="check1_Opt2" checked>
    <label for="check1_Opt2">A Label Here 2</label>
  </div>
</div>

<div class="label-check">
  <div class="radio">
    <input type="radio" name="radioGrp1" id="radio1_Opt1">
    <label for="radio1_Opt1">Radio Label 1</label>
  </div>
  <div class="radio">
    <input type="radio" name="radioGrp1" id="radio1_Opt2" checked>
    <label for="radio1_Opt2">Radio Label 2</label>
  </div>  
</div>

HTML/JS 方法

还有一些其他的 Material 实现以跨浏览器友好的方式达到了这个目标。所有这些通常依赖于:

隐藏实际<input>元素

在标签 内放置一个风格化的复选框

在某些情况下，这依赖于自己在设计时适本地格式化 HTML，或者在网站初始化时生成它。

例如， FezVrasta's Material Design for Bootstrap , 在这两个 V3和 V4将采用这样的 HTML 结构:

<div class="checkbox">
  <label>
    <input type="checkbox"> 
    Notifications
  </label>
</div>

并在调用 $.material.init() 时插入一个新跨度所以结果看起来像这样:

<div class="checkbox">
  <label>
    <input type="checkbox">
    <span class="checkbox-material">
 <span class="check"></span>
 </span>
    Notifications
  </label>
</div>

虽然这依赖于初始化的发生，但它允许对 CSS 复选框和单选按钮进行更细粒度的控制，而不是将其全部塞入伪元素中。