html - 如何提高我的纯 CSS slider 菜单的跨浏览器兼容性？

Question

我有一个只有 css 的菜单，背景必须随着动画滑动到选定的菜单项:

.wrapper {
  font: 0/0 a;
  position: relative;
  white-space: nowrap;
}
.radio {
  -webkit-appearance: none;
  color: rgb(0, 0, 0);
  margin: 0 10px 0 0;
  outline: 0;
  padding-bottom: 10px;
  padding-top: 10px;
  position: relative;
  text-align: center;
  transition: color .5s linear;
  z-index: 2;
}
.radio:after {
  content: attr(data-text);
}
.radio:checked {
  color: rgb(255, 255, 255);
}
.bg {
  background: black;
  border-radius: 10px;
  bottom: 0;
  position: absolute;
  top: 0;
  transition: left .25s linear;
  z-index: 1;
}
.radio,
.bg {
  width: 100px;
}
.radio:checked + .radio + .radio + .radio + .radio + .bg {
  left: 0;
}
.radio + .radio:checked + .radio + .radio + .radio + .bg {
  left: 110px;
}
.radio + .radio + .radio:checked + .radio + .radio + .bg {
  left: 220px;
}
.radio + .radio + .radio + .radio:checked + .radio + .bg {
  left: 330px;
}
.radio + .radio + .radio + .radio + .radio:checked + .bg {
  left: 440px;
}

<div class="wrapper">
  <input type="radio" class='radio' name="r" data-text="Save" checked>
  <input type="radio" class='radio' name="r" data-text="Fork">
  <input type="radio" class='radio' name="r" data-text="Info">
  <input type="radio" class='radio' name="r" data-text="Share">
  <input type="radio" class='radio' name="r" data-text="Edit">
  <i class="bg"></i>
</div>

我在选择器中使用了 radio 控件及其 checked 状态，并通过 radio 的伪元素呈现文本。对于 radio ，我使用了 -webkit-appearance: none 和固定宽度。

此菜单的要点 - 仅保留 css。我的问题是:

• 如何使菜单具有更好的跨浏览器兼容性？ (现在仅适用于 webkit)
• 我不想使用固定宽度的导航元素

Code source进行更多实验。

Answer 1

为其他浏览器添加外观 css 怎么样？

.thing {
  -webkit-appearance: value;
  -moz-appearance:    value;
  appearance:         value;
}

代码来自 here