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上使用hover来模拟 faux 更大胆的文字。

对x和y偏移使用0以使阴影勾勒出文本。调整颜色以减少或增加影响。

示例代码段

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

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

编辑：这适用于所有现代浏览器，但不适用于IE＆lt; 10。

对于旧版IE，您可以使用标准shadow filter的{{1}}作为最后一条规则。像这样：

text-shadow

我还没有测试过它。你可能需要调整一下。此遗留规则的更多详细信息如下：https://msdn.microsoft.com/en-us/library/ms533086(v=vs.85).aspx

Answer 2

您可以这样做（设置min-width）：

<强> CSS

  .buttonEnabled{
    min-width: 100px;
    }

 .buttonEnabled:hover {
    font-weight:bold;
    }

<强> HTML

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

<强> DEMO HERE

Css使按钮标题大胆

2 个答案: