无法在 <input> 元素上使用的 :after 伪元素上设置字体粗细答案

【问题标题】：Can't set font-weight on the :after pseudo-element used on <input> elements无法在 <input> 元素上使用的 :after 伪元素上设置字体粗细
【发布时间】：2013-08-11 13:43:37
【问题描述】：

所以，我在输入元素上有一个自定义样式，我想使用 :after 在输入上放置一些文本。

我遇到的问题是我似乎无法更改 :after 元素上的字体粗细，这个问题只发生在 input 和 :after 元素的组合中。

CSS

input[type="checkbox"] { /* enable styling of the checkbox ! */
    -moz-appearance: none;
    -webkit-appearance: none;
}

input { /* set up some basic styles.... */
    background-color:#ccc;
    width:200px;
    height:200px;
    background-color:grey;
}

input:after { /* and we create the :after element */
    width:100%;
    text-align:center;
    font-weight:100; /* THIS DOESN'T WORK FOR SOME REASON */
    content: "This should be thin"; /* some text */
}

JSFIDDLE

http://jsfiddle.net/xQVfL/1/

已测试

Chrome for mac（最新版）

问题

为什么我不能在 :after 元素上设置 font-weight 设置在 input 元素上？

【问题讨论】：

似乎对我有用.. 700 使其粗体.. 100 使其变薄
我使用的是 chrome (mac)，但它不起作用
100 基本上意味着正常体重.. 700 是否会让您变得粗体？看这里w3schools.com/cssref/…
我注意到内容没有显示在 Firefox 中，但在 Chrome 中显示。文字或灰色背景在 FF 中都不起作用。
@Phorden 灰色背景工作对我来说很好，只是字体粗细不起作用

标签： html css pseudo-element css-content

【解决方案1】：

这里已经回答了。似乎 :after 仅用于附加到容器标签。 Can I use the :after pseudo-element on an input field?

【讨论】：

嗯......这很糟糕。再等一会，也许有人想出一个解决方法，否则我不接受你的回答。