使按钮标题加粗的CSS

Question

我想将按钮标题设为粗体。但它不应该影响按钮的宽度。我试过 font-weight 它改变了按钮的宽度。

<input type="button" style="width:10px" class="buttonEnabled">
<input type="button" style="width:20px" class="buttonEnabled">
    .buttonEnabled:hover {
    font-weight:bold;
    }

Answer 1

如果您不想固定宽度或者您有多个宽度输入，那么您可以通过仅在 上使用 text-shadow 来模拟一个faux 更粗的文本悬停。

使用 0 作为 x 和 y 偏移量，使阴影勾勒出文本轮廓。调整颜色以减少或增加影响。

示例片段:

.buttonEnabled:hover { text-shadow: 0px 0px 1px #333; }

<input type="button" class="buttonEnabled" value="Submit">

编辑:这适用于所有现代浏览器，但不适用于 IE < 10。

对于旧的 IE，您可以使用带有标准 text-shadow 的 shadow 过滤器 作为最后的规则。像这样:

.buttonEnabled:hover { 
  filter: progid:DXImageTransform.Microsoft.Shadow(
    color=#333,direction=0,strength=1
  );
  text-shadow: 0px 0px 1px #333; 
}

虽然我还没有测试过。您可能需要调整它。有关此遗留规则的更多详细信息，请参见:https://msdn.microsoft.com/en-us/library/ms533086(v=vs.85).aspx