代码之家 › 专栏 › 技术社区 › AmandaG

html标签:内容在文本中需要有不同的颜色

pseudo-class css html

AmandaG · 技术社区 · 8 年前

我已经设置了模型属性的显示名称,但如果不需要,则需要用冒号显示,如果需要,则用冒号和红色星号显示。

我不想在显示名称中添加冒号,因为我不希望冒号出现在错误消息中,我可能想在没有冒号的地方显示它们。

我在HTML文件中使用以下样式添加冒号:

.my-label > label:after {
        content: ": ";
}

然而,如果字段是必需的,我不知道如何在其后显示一个红色星号。

我可以创建另一个样式类来包含星号,但是如果我更改颜色,它要么全是红色,要么全是黑色。我不确定是否需要设置实际的模型属性,因为我不确定我是否需要一个通用规则来说明它是必需的。

欢迎提出更好的处理方法。

3 回复 | 直到 8 年前

Hidden Hobbes 8 年前

这个问题

在单个伪元素中不可能使用不同的颜色。在这种情况下,您可以输出 :* 使用 :after 伪元素,但不能使字符颜色不同。

解决方案1

实现您所追求的目标的一种可能方法是使用 :before 伪元素。当然,最重要的问题是,这将把星号放在 label 。您可以通过将 标签 使用flexbox型号。这将允许更改伪元素的顺序,允许您将 :之前 元素的末尾 标签 :

.my-label > label {
  display: inline-flex;
}
.my-label.required > label:before {
  color: red;
  content: "*";
  order: 1;
}
.my-label > label:after {
  content: ":";
}

<div class="my-label">
  <label>Not required</label>
  <input type="text" />
</div>
<div class="my-label required">
  <label>Required</label>
  <input type="text" />
</div>

缺点

此解决方案的缺点是,如果用户使用的浏览器不支持flexbox或IE( where a bug stops the flexbox rules being applied to pseudo elements )星号将显示在标签之前。

解决方案2

实现这一目标的第二种方法是使用绝对定位。通过设置 标签 到 position: relative; 您可以将 :之前 元素的末尾 position: absolute; 和 right: 0; .通过添加一些权限 padding 您可以为元素“保留”空间,这样文本就不会重叠。

.my-label > label {
  /*10px is for old browsers which don't support the ch unit*/
  padding-right: 10px;
  padding-right: 1ch;
  position: relative;
}
.my-label.required > label:before {
  color: red;
  content: "*";
  position: absolute;
  right: 0;
}
.my-label > label:after {
  content: ":";
}

<div class=“我的标签”>
<(lt;);标签>不需要</标签>
<(lt;);输入type=“text”/>
<(lt;)/div>
<(lt;);div class=“需要我的标签”>
<(lt;);标签>必需</标签>
<(lt;);输入type=“text”/>
<(lt;)/div>

缺点

这种方法没有太多缺点,因为它应该在大多数浏览器(甚至更早的浏览器)中工作。

dippas 8 年前

正如评论中所说的,为什么您不只是添加 : 到 label 因为它属于内容?

然后你可以有一个简单的 ::after 使用 color:red

事情简单的时候,为什么要复杂化呢。

.required::after {
  color: red;
  content: "*";
}

<div>
  <label>Not required:</label>
  <input type="text" />
  <label class="required">Required:</label>
  <input type="text" />
</div>

Marc Audet 8 年前

使用Hidden Hobbes建议的标记,作为flexbox的替代方法,您可以使用相对位置和绝对位置的组合来将星号放置在所需的位置。

这种方法可能需要进行一些调整,以使水平和垂直位置正好适合所使用的字体。

.my-label > label {
  display: inline-block;
  position: relative;
}
.my-label.required > label {
  padding-right: 1em;
}
.my-label.required > label:before {
  color: red;
  content: "*";
  position: absolute;
  top: 0.1em;
  right: 0.25em;
}
.my-label > label:after {
  content: ":";
}

<div class="my-label">
  <label>Not required</label>
  <input type="text" />
</div>
<div class="my-label required">
  <label>Required</label>
  <input type="text" />
</div>