【问题标题】：Standardized way of graying out normal HTML text使普通 HTML 文本变灰的标准化方法
【发布时间】：2016-10-29 03:24:02
【问题描述】：

在 HTML 或引导程序中，是否有一种标准化的方式将本应被忽略的文本变灰（变灰）？

我尝试查看 Slack 如何设置“（已编辑）”文本的样式，以及 Twitter 本身 (twitter.com) 如何设置时间戳，似乎它们只是更改了字体颜色。我觉得很奇怪，选择了任意字体颜色而没有附加任何语义信息，甚至没有标准的灰色阴影。

bootstrap documentation 提到了一些语义颜色，但其中不包括灰色 - 灰色仅在灰度中提及。

【问题讨论】：

标签： html css twitter-bootstrap colors

【解决方案1】：

标准 HTML 输入表单

这方面的一个例子是禁用 HTML 输入元素，尽管没有跨浏览器的标准显示。

http://codepen.io/anthonyastige/pen/dXNEmx

<input type=button value="I can do all the things">
<input type=button value="I'm disabled" disabled>

引导输入表单

这里还有使用.disabled 类禁用输入元素的概念

https://getbootstrap.com/css/#checkboxes-and-radios

引导文本

.text-muted 类表示禁用，但规范并未明确说明其含义。

https://getbootstrap.com/css/#helper-classes

【讨论】：

【解决方案2】：

实际上有一个标准的方法可以做到这一点，在引导程序中，就是使用text-muted。

事实上，有一个直接应用的标准文本阴影和颜色列表。

http://www.w3schools.com/bootstrap/bootstrap_ref_css_helpers.asp

对于 HTML，拥有一个带有禁用类的 CSS 并将其应用于任何文本将是更好的选择。

【讨论】：

@downvoter，请告诉我这不是为了引用 w3schools。
赞成，因为我对 w3schools 没有意见 :)
赞成（你们所有人）。与我为 php、javascript、html 和 css 找到的其他在线文档相比，我从 w3schools 学到了很多东西。它直截了当，易于阅读，带有清晰的示例，以及用于测试简单内容的出色沙箱。换句话说，@downvoter（无论你是谁），w3schools 都是合法的

【解决方案3】：

请参阅下面的示例：

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<fieldset disabled>
  <div class="form-group">
    <label for="inputText">Disabled input</label>
    <input class="form-control" id="inputText" type="text" placeholder="Disabled Input" disabled>
    <p class="help-block">Example block-level help-block class text here.</p>
    <p class="text-muted">Example block-level with text-muted class.</p>
  </div>
  <div class="form-group">
    <label for="optionSelect">Disabled select menu</label>
    <select id="optionSelect" class="form-control">
      <option>Select Value</option>
    </select>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox">Disabled Checkbox
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Disabled Button</button>
</fieldset>

【讨论】：