【问题标题】::after pseudo class not working outside Chrome:伪类在 Chrome 之外无法工作之后
【发布时间】:2014-06-24 15:59:17
【问题描述】:

使用 JQuery 我有一个错误检查,将一个类添加到 <input> 复选框。那有一个:after 伪类,但该类显示的信息没有出现。

尝试了几件事来让它工作,但没有骰子。这是我正在开发的网站:SITE

我能想到这不起作用的唯一其他原因是页面需要通过添加新类来刷新......但我添加新类的所有其他内容都有效。

当复选框被选中并且没有选择扫描仪时出现错误检查。

这是我所有的相关代码:

HTML

<form id="lp5_form" class="prodForm">
    <label><span>Apple Product: </span><select class="model">
                            <option value="0">iPod 5</option>
                            <option value="1">iPhone 5</option>
                         </select></label>
    <label style="padding: 10px 0;"><h4>Sled Options :</h4></label>
    <table>
        <tr>
            <td>Encryption Capability: </td><td><select class="encryption">
                                                   <option value="0">Standard</option>
                                                   <option value="1">SRED for PCI Compliancy</option>
                                                 </select></td>
        </tr>
        <tr>                                         
            <td>Scanner: </td><td><select class="scanner">
                                    <option value="0">None</option>
                                    <option value="1">1D</option>
                                    <option value="2">2D</option>
                                  </select></td>
        </tr>
        <tr>
            <td>Bluetooth: </td><td><input class="bt" type="checkbox" value="bluetooth" /></td>
        </tr>
    </table>
</form>

CSS

.pn_error{}

.pn_error:after, .pn_error::after {
    content: "*Please select a scanner";
    color: red;
    position: relative;
    display: block;
    width: 200px;
    left: 20px;
    top: -2px;
    font-size: 12px !important;
}

JQUERY 错误检查

if(scanner == 0) {
    bt = 0;
    $(id+' .bt').addClass('pn_error');
}

像往常一样,非常感谢所有帮助。

【问题讨论】:

    标签: jquery html css internet-explorer firefox


    【解决方案1】:

    :after 是伪元素,而不是伪类。因此,它们不能应用于不允许子元素的元素。所以没有img:after,没有br:after,也没有input:after。

    【讨论】:

    • 不错的收获。也在寻找原因!
    • 要验证 Niet the Dark Absol 的意思,如果您使用 Chrome 的检查器查看自己的源代码,您会看到 Chrome 是如何处理 ::after:@ 987654327@。这在语法上是不正确的,但无论如何 Chrome 都会渲染它。
    • 非常感谢...您有不允许儿童使用的元素列表吗?
    • @Adjit area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr w3.org/TR/html-markup/syntax.html#void-elements 就是说,并不是所有有子元素的元素都可以应用伪元素,如 SELECT
    • @Adjit 任何不将其内容存储为 DOM 子节点的元素。
    猜你喜欢
    • 2013-04-07
    • 1970-01-01
    • 2012-04-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-01-06
    • 2012-01-02
    • 2019-07-04
    相关资源
    最近更新 更多