Question

制作自定义外观复选框元素的一种常见方法是隐藏浏览器的默认复选框，并在复选框标签上为您的自定义外观创建一个伪元素：

.myclass::before {
    <Some styles for the custom looking checkbox>
}

通常，呈现的HTML最终看起来像这样：

::before
<label class="myclass">text</span>

虽然我无法根据文本方向放置复选框。对于ltr语言（例如英语），在标签文本之前，使::复选框出现是合理的，但是在rtl语言中看起来很尴尬（例如希伯来语）。制作样式相同的:: after伪元素解决了我的问题，但是我不知道如何仅基于文本方向将一种CSS样式应用于另一种CSS样式。似乎没有单独的CSS可以检测元素的计算文本方向（unless you're Firefox?）

有什么建议吗？

Answer 1

div{
  margin: 10px 10px 30px;
}
label{
  position: relative;
  cursor: pointer;
  display: block;
}
span{
  content: '';
  display: block;
  background: #fff;
  width: 15px;
  height: 15px;
  border: 1px solid red;
  position: relative;
  top: 20px;
}
label strong{
  color: #fff;
  display: block;
  position: relative;
  top: -15px;
}
input:checked + strong{
  color: red;
}

<div>
<label>
  <span></span>
  <input type="checkbox"> English 
  <strong>X</strong>
</label>
</div>

<div>
<label dir="rtl">
  <span></span>
  <input type="checkbox"> العَرَبِيَّة 
  <strong>X</strong>
</label>
</div>

Answer 2

我会在body元素上添加一个类，例如“ set-rtl” /“ set-ltr”，假设您知道自己处于rtl模式，然后根据body类对元素进行样式设置。

在您的示例中，它将是：

.set-rtl .myclass::after{
    <Some styles for the custom looking checkbox>
}

.set-ltr .myclass::before{
    <Some styles for the custom looking checkbox>
}

另一种选择是为每种模式创建一个不同的CSS文件。

Answer 3

所以我有2个问题。

我的显示样式需要设置为内嵌式
我必须将sudo-element的位置从绝对更改为相对，这意味着：
- 删除初始标签的填充（这是为复选框保留的空间）
- 在复选框中添加相同数量的左右填充
- vertical-align：middle;

当复选框根据文本的语言而流经ltr或rtl时，就像文本一样。

基本上，可以归结为我将复选框视为非常单独的，经过特殊处理的东西的事实。

如何根据文本方向移动伪元素复选框？

3 个答案: